微信小程序组件解读和分析：三、swiper滑块视图

swiper滑块组件说明:

• 滑块视图容器，用于展示图片，可以通过用户拖拽和设置自动切换属性控制图片的切换

 

组件的使用示例的运行效果如下：

 

下面是WXML代码：

[XML]  纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13

[/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]  纯文本查看 复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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      })    } })

wxss

[CSS]  纯文本查看 复制代码

?

1 2 3 4

.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}

点击查看原文

转载于:https://www.cnblogs.com/johnchai/p/6637406.html