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