微信小程序之轮播组件swiper-小程序swiper轮播-swiper小程序-即速应用

微信小程序之轮播组件swiper-小程序swiper轮播-swiper小程序

浏览量：1728 时间：2020-04-06 来源：Code_星华

1.
swiper，轮播图片，叫滑块视图容器。效果很屌的哦
2.
官方文档例子很好：
3.
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
4.
先上最终效果：
5.
啦啦啦，代码：
6.
样式无所谓的啦，定义你自己喜欢的就好。
7.
swiper
8.
swiper标签中只可以放置swiper-item
9.
常用属性：
10.
indicator-dots：默认为false，是否显示面板指示点，肯定是true好看呀；
11.
indicator-color：这个是指示点颜色；
12.
autoplay：默认false，是否自动切换，轮播嘛，肯定也是true；
13.
interval：默认5000毫秒，自动切换的时间间隔
14.
duration：默认500，滑动动画的时长，这个我没改过
15.
circular：默认false，是否采用衔接滑动
16.
vertical：默认false，将滑动方向改为纵向
17.
display-mltiple-items：默认1，同时显示的滑块数
18.
事件：
19.
bindchange：改变时触发事件。在回调setData改变current值，应判断source是否由用户触摸事件，避免setData不停调用。
20.
bindanimationfinish：动画结束后触发事件
21.
两个事件的event.detail{current：current，source：source（返回变更原因）}
22.
swiper-item仅可以放在swiper中，宽高自动设置为100%
23.
属性
24.
item-id：标识id