微信小程序之swiper标签

标签：top   line   ima   加载   html   png   UNC   完成   微信   

swiper标签是微信小程序中自带的轮播图组件，然我们可以快速的创建一个轮播图，不再需要像在HTML中那样麻烦。

swiper （滑块视图容器，即轮播图容器）

轮播图组件容器。
在此容器中加入轮播的图片，设置部分属性即可完成轮播图的设计，非常方便。下面记录一下各个常用属性及其作用。

注意

下面这些全都是属性，不是CSS样式

1.autoplay(自动轮播，默认false)

值为：true/false，如果是true可以直接写autoplay，不用写值。
添加这个属性之后，轮播图就可以动起来了。

2.indicator-dots(是否显示面板指示点，即小圆点)

值为：true/false，如果是true可以直接写indicator-dots，不用写值。
添加这个属性之后，轮播图中间靠底部会有对应的小圆点出现。

3.indicator-color(小圆点未选中时的颜色，默认rgba(0, 0, 0, .3))

值为颜色代码。例：indicator-color="#ffffff"

4.indicator-active-color(小圆点被选中时的颜色，默认#000000)

值为颜色代码。例：indicator-active-color="#c4c4c4"

5.interval(设置每张图片的展示时间，即轮播间隔)

值为时间，单位ms，默认5000ms，即5秒。例：interval="3000"

6.duration(设置动画过程的时间)

值为时间，单位ms，默认500ms，即0.5秒。例：duration="300"

这里设置的主要是自动轮播时的动画时间，手动拖动时要看手的速度??

7.current(当前所在滑块的index，默认0)

值为非负整数，就是默认展示的图片，在页面加载时展示的第几张图片

这里的idnex有点像是数组的下标，以0开头。

8.circular(是否采用衔接滑动)

默认false，主要是让图片从最后一张到第一张图片的动画变为衔接的，而不是回到第一张图片。

9.easing-function(swiper切换动画类型)

默认："default",

所有其他值：

swiper-item(swiper的必要子组件)

如果在swiper中不使用swiper-item，轮播组件的内容则显示不了。

在每个image外使用swiper-item包裹起来，则可以了。

(完)

微信小程序之swiper标签

标签：top   line   ima   加载   html   png   UNC   完成   微信   

原文地址：https://www.cnblogs.com/Guo-Xiaoqiang/p/13346533.html