【uniapp小程序开发】—— 组件封装之【自定义轮播图】

🍋前言：

本文主要展示小程序端封装轮播图组件，使用的是uniapp进行的开发，主要使用的是uniapp官网提供的swiper组件,可以参考官方文档，查看一些相关API。

效果图一睹为快：

话不多说直接上正文一起来学习一下封装轮播图组件吧！

🍍正文

1、首先了解swiper组件

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

1.1、小小的demo示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果图如下：

1.2、自定义轮播图效果展示说明

我们要做的是：

1. 轮播图底部颜色渐变

2. 左下方包含对应图片的一行文字说明

3. 指示点在右下方，选中颜色为白色，未选中为灰色

效果图如下：

2、完成自定义轮播图效果

我们先完成效果再去探讨如何封装成组件。如下示例代码展示了自定义轮播图的效果：

swiper常用属性介绍：

• indicator-dots：轮播图正前方的小圆点(此案例没有使用官方提供的，是自定义的在右下角附近)
• autoplay：是否自动切换
• interval：图片轮播间隔此处为3秒
• duration：图片轮播动画时长 此处为0.5秒
• circular：是否开启无缝轮播（此处为到第三张图片后无缝播放第一张图片）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

示例代码中的class类中的类名样式是我已经在全局配置好的，由于篇幅比较长，之后的小程序文章也会经常使用，我已经上传到了CSDN资源（免费），点击链接跳转下载可查看相对应的样式。

点击跳转下载free.css文件

3、组件封装——自定义轮播图

3.1、创建swiper-doc.vue组件

3.2、组件调用，封装完成

首先我们要清楚，我们封装的内容为我们自定义的部分，swiper滑块区域是不需要封装的是通用的，我们使用插槽站位。我们只需要将我们自定义的指示点、介绍文字、渐变模块封装即可。

示例代码如下：

swiper-doc.vue文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

• info表示我们所需的轮播图片数据；

• current表示那个轮播图片的索引，用于获取title和指示点。

index.vue文件：

			
			
				
					
						
						
					
				
			


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

注意：文章案例中的swipers数组在实际开发中应该是从后端获取的，我们这里是自己直接定义的。

🎃专栏分享：

小程序项目实战专栏：《uniapp小程序开发》
前端面试专栏地址：《面试必看》

---

⏳ $名言警句：说能做的，做说过的$

✨ $原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$