提示:由于微信小程序自带标签<swiper></swiper>所以不需要引入任何组件
swiper属性
须知:使用前我们需要了解
<swiper></swiper>的属性
indicator-dots:是否显示面板指示点,默认值为false,设置为true时显示指示点。- indicator-color:指示点的颜色,默认值为rgba(0, 0, 0, .3),可以设置为任何有效的颜色值。
- indicator-active-color:当前选中指示点的颜色,默认值为#000000,可以设置为任何有效的颜色值。
- autoplay:是否自动切换,默认值为false,设置为true时自动切换。
- current:当前所在滑块的索引值(从0开始),可以通过改变该值来切换到指定的滑块。
- interval:自动切换时间间隔,单位为毫秒,默认值为5000,即5秒。
- duration:滑动动画时长,单位为毫秒,默认值为500,即0.5秒。
- circular:是否采用衔接滑动,默认值为false,设置为true时可循环滑动。
- vertical:滑动方向是否为纵向,默认值为false,设置为true时滑动方向为纵向。
基础wxml搭建
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{3000}}"> <swiper-item> <!-- 第一个滑块内容 --> </swiper-item> <swiper-item> <!-- 第二个滑块内容 --> </swiper-item> <swiper-item> <!-- 第三个滑块内容 --> </swiper-item> </swiper>
总结
如果要实现swiper的多种功能,可以自行添加上述属性。