滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换
下面是WXML代码:
[XML] 纯文本查看 复制代码
[/align]interval duration
下面是JS代码:
[JavaScript] 纯文本查看 复制代码
page({ 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 }) }})
[CSS] 纯文本查看 复制代码
.swiper-item{ display: block; height: 150px;}
主要属性:
设置界面的内容样式,用于wxml
以上就是解读和分析微信小程序组件:三、swiper滑块视图的详细内容,更多请关注 第一PHP社区 其它相关文章!