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

====================
快速跳转：
我的个人博客主页👉：Reuuse博客
新开专栏👉：Vue3专栏
参考文献👉：uniapp官网
免费图标👉：阿里巴巴矢量图标库
❀ 感谢支持！☀
==================

前情提要

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

---

引言

在前端开发的世界里，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