微信小程序之swiper标签

Posted GodGuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序之swiper标签相关的知识,希望对你有一定的参考价值。

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"

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

以上是关于微信小程序之swiper标签的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序之选项卡的实现方法

微信小程序之选项卡的实现方法

微信小程序之视图容器(swiper)组件创建轮播图

微信小程序标签页切换

微信小程序之wxss文件使用变量动态计算参数值

微信小程序之常用组件