【vue3实现微信小程序】从轮播图到公告栏的前端开发之旅

====================
快速跳转：

我的个人博客主页👉：Reuuse博客

新开专栏👉：Vue3专栏

参考文献👉：uniapp官网

免费图标👉：阿里巴巴矢量图标库

❀ 感谢支持！☀

==================

前情提要

🔺从现在开始呢，我们就要开始真正的实现一个完整的项目了！❀❀❀

⭐在实现项目的过程中，会将一些比较重要的点进行讲解，确保基础薄弱的宝子们都能够理解！本次博客的开始也算是为了一边学一边做项目❗
那么话不多说我们开始吧

---

vue

• 前情提要
• • • 引言
    • 一、项目结构和基础概念
    • 二、轮播图板块
    • 三、公告栏板块
    • 四、每日推荐板块
    • 五、每日专题板块
    • 六、样式和布局
    • 结语

引言

在前端开发的世界里，uni-app是一个强大的框架，它允许开发者使用Vue.js开发跨平台应用。本文将通过一个实际的uni-app项目案例，带领大家了解如何构建一个具有轮播图、公告栏、每日推荐和专题精选等功能的页面。

---

一、项目结构和基础概念

1. uni-app介绍：uni-app允许开发者使用Vue.js开发所有前端应用的框架，编译到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

2. Vue.js基础：uni-app使用Vue.js作为底层框架，因此了解Vue.js的基本指令和组件系统是必要的。

3. 组件化开发：uni-app鼓励组件化开发，这有助于代码的复用和维护。

4. 模板语法 ：了解Vue.js的模板语法，如v-for、v-bind等。

5. 样式作用域 ：scoped属性确保组件内的样式不会泄露到外部。

---

二、轮播图板块

1. swiper组件 ：uni-app中的swiper组件用于创建轮播图。

2. 自动播放 ：autoplay属性使轮播图自动播放。

3. 循环播放 ：circular属性允许轮播图循环播放。

4. 指示点 ：indicator-dots属性显示轮播图的指示点。

5. 自定义指示点颜色 ：indicator-color和indicator-active-color属性用于自定义指示点的颜色。

6. 图片填充模式 ：mode="scaleToFill"使图片填充整个容器。

7. 响应式设计 ：使用rpx单位确保布局在不同设备上的适应性。

代码附赠

== html ==

<view class="banner">
			<swiper indicator-dots indicator-color="rgba(255,255,255,.05)"
			indicator-active-color="#fff" autoplay circular>
				<swiper-item >
					<image src="../../common/image/1.png" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item >
					<image src="../../common/image/2.png" mode="scaleToFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="../../common/image/3.jpg" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>
		</view>

== scss ==

.banner{
		width: 750rpx;
		padding:30rpx 0;
		swiper{
			width: 750rpx;
			height: 340rpx;
			&-item{
				height:100%;
				width: 100%;
				padding:0 30rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}

---

三、公告栏板块

1. 垂直滚动 ：swiper的vertical属性使轮播图垂直滚动。

2. 公告内容 ：使用v-for指令循环生成公告内容。

3. 图标组件 ：uni-icons组件用于显示图标。

4. 文本样式：通过CSS设置文本的颜色、大小和粗细。

5. 布局 ：使用flex布局来安排公告栏的结构。

6. 溢出处理 ：overflow、white-space和text-overflow属性用于处理文本溢出。

代码附赠

== html ==

<view class="notice">
			<view class="left">
				<uni-icons type="sound-filled" size="20" color="#28b389"></uni-icons>
				<text class="text">公告</text>
			</view>
			<view class="center">
				<swiper vertical autoplay interval="1500" duration="300" circular>
					<swiper-item v-for="item in 4">公告内容</swiper-item>
				</swiper>
			</view>
			<view class="right">
				<uni-icons type="right" size="16" color="#333"></uni-icons>
			</view>
		</view>

== scss ==

.notice{
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #f9f9f9;
		margin: 0 auto;
		border-radius: 80rpx;
		display: flex;
		.left{
			width: 140rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.text{
				color: #28b389;
				font-weight: 600;
				font-size: 28rpx;
			}
		}
		.center{
		 	flex:1;
			swiper{
				height: 100%;
				&-item{
					height:100%;
					font-size: 30rpx;
					color: #666;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					
				}
			}
		}
		.right{
			width: 70rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

---

四、每日推荐板块

在这里这个图标和获取日期的组件，涉及到外部组件引入，方法很简单：
下载官网链接

1. 水平滚动视图 ：scroll-view组件的scroll-x属性创建水平滚动视图。

2. 图片列表 ：使用v-for指令循环生成图片列表。

3. 图片裁剪模式 ：mode="aspectFill"保持图片的宽高比同时填充容器。

4. 日期显示 ：uni-dateformat组件用于格式化和显示日期。

5. 自定义组件 ：<common-title>可能是一个自定义组件，用于显示标题。

代码附赠

== html ==

<!-- 每日推荐 -->
		<view class="select">
			<common-title>
				<template #name>每日推荐</template>
				<template #custom>
					<view class="date">
						<uni-icons type="calendar" size="18" color="#28b389"></uni-icons>
						<view class="text">
							<uni-dateformat :date="Date.now()" format="dd日"></uni-dateformat>
						</view>
					</view>
				</template>
			</common-title>
			<view class="content">
				<scroll-view scroll-x>
					<view class="box" v-for="item in 8">
						<image src="../../common/image/4.jpg" mode="aspectFill"></image>
					</view>
				</scroll-view>
			</view>
		</view>

== scss ==

.select{
		padding-top: 50rpx;
		.date{
			color:#28b389;
			display: flex;
			align-items: center;
			.text{
				margin-left: 5rpx;
			}
		}
		.content{
			width: 720rpx;
			margin-left: 30rpx;
			margin-top: 30rpx;
			scroll-view{
				white-space: nowrap;
				.box{
					width: 200rpx;
					height: 430rpx;
					display: inline-block;
					margin-right: 15rpx;
					image{
						width: 100%;
						height: 100%; 
						border-radius: 10rpx;
					}
				}
				.box:last-child{margin-right: 30rpx;}
			}
		}
	}

---

五、每日专题板块

1. 导航链接 ：navigator组件用于创建页面间的导航链接。

2. 更多功能 ：通过More+链接引导用户探索更多内容。

代码附赠

== html ==

<!-- 每日专题 -->
		<view class="theme">
			<common-title>
				<template #name>专题精选</template>
				<template #custom>
					<navigator url="" class="more">More+</navigator>
				</template>
			</common-title>

		</view>

== scss ==

.theme{
		padding-top:50rpx;
		.more{
			font-size: 32rpx;
			color: #888;
		}
	}

---

六、样式和布局

1. 全局样式：使用SCSS预处理器编写更简洁的样式。

2. 布局 ：通过flex布局实现响应式和灵活的布局。

3. 边距和填充 ：使用margin和padding来调整元素间的间距。

4. 圆角 ：border-radius属性用于创建圆角效果。

5. 颜色和字体：通过CSS设置元素的颜色和字体样式。

---

结语

通过本文的介绍，我们了解了如何在uni-app中构建一个具有丰富功能的页面。从轮播图到公告栏，再到每日推荐和专题精选，每一个板块都是前端开发技能的体现。希望本文能够帮助初学者快速入门uni-app开发，探索更多的可能性。

---

🌼那么今天就到这里吧！

▲后续会陆续跟新vue系列。再后来会逐渐成熟，向大家展现更简洁明了的知识汇总！

一个小小的赞是对我最大的鼓励！

感谢你们看到这里，下次见~