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

Posted 2020-09-07 微信开发--51小程序

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}

点击查看原文