解读和分析微信小程序组件:三、swiper滑块视图
程序员文章站
2022-05-03 11:37:07
...
swiper滑块组件说明:
滑块视图容器,用于展示图片,可以通过用户拖拽和设置自动切换属性控制图片的切换
下面是WXML代码:
[XML] 纯文本查看 复制代码
[/align] <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150"/> </swiper-item> </block> </swiper> <button bindtap="changeIndicatorDots"> indicator-dots </button> <button bindtap="changeAutoplay"> autoplay </button> <slider bindchange="intervalChange" show-value min="500" max="2000"/> interval <slider bindchange="durationChange" show-value min="1000" max="10000"/> 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
属性 |
类型 |
默认值 |
描述 |
indicator-dots |
Boolean |
false |
是否显示面板指示点 |
autoplay |
Boolean |
false |
是否自动切换 |
current |
Number |
0 |
当前所在页面的 index |
interval |
Number |
5000 |
自动切换时间间隔 |
duration |
Number |
1000 |
滑动动画时长 |
bindchange |
EventHandle |
current 改变时会触发 change 事件,event.detail = {current: current} |
以上就是解读和分析微信小程序组件:三、swiper滑块视图的详细内容,更多请关注其它相关文章!