微信小程序滑块视图效果-小程序图片滑块验证码-小程序图形验证码-即速应用

微信小程序滑块视图效果-小程序图片滑块验证码-小程序图形验证码

浏览量：2606 时间：2020-04-06 来源：WXzhangxulei

1.
今天给大家介绍微信小程序视图滑动容器标签——swiper
2.
注意：其中只可放置swiper-item/组件，否则会导致未定义的行为。
swiper-item仅可放置在swiper/组件中，宽高自动设置为100%。
属性名类型默认值说明最低版本item-idString""该swiper-item的标识符1.9.0swiperindicator-dots"{{indicatorDots}}"autoplay"{{autoplay}}"interval"{{interval}}"duration"{{duration}}"blockwx:for"{{imgUrls}}"swiper-itemimagesrc"{{item}}"class"slide-image"width"355"height"150"//swiper-item/block/swiperbuttonbindtap"changeIndicatorDots"indicator-dots/buttonbuttonbindtap"changeAutoplay"autoplay/buttonsliderbindchange"intervalChange"show-valuemin"500"max"2000"/intervalsliderbindchange"durationChange"show-valuemin"1000"max"10000"/durationPage({data:{imgUrls:['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg','http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],indicatorDots:false,autoplay:false,interval:5000,duration:1000},changeIndicatorDots:function(e){this.setData({indicatorDots:!this.data.indicatorDots})},changeAutoplay:function(e){this.setData({autoplay:!this.data.autoplay})},intervalChange:function(e){this.setData({interval:e.detail.value})},durationChange:function(e){this.setData({duration:e.detail.value})}})