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滑块视图的详细内容。