根据官方文档,在自己的程序上运行,并打进代码的效果图,swiper
滑块视图容器,是用来展示图片,控制图片的
效果图
swiper
为滑块视图容器,其实就是轮播图的效果。
代码中indicator-dots="{{indicatorDots}}"
的效果是用来显示指示点的,就是图片中下方的小圆圈。
autoplay="{{autoplay}}"
为是否可以自动切换的效果,如果不设置,那就只有一张图片显示到界面中。
current="0"
为当前显示在哪个滑块,为啥为0
,因为默认值为0
,可知从零开始算起嘛。
interval="{{interval}}"
为自动切换时间的间隔,表示每张图片显示到它设定的时间就开始切换到下一个视图即图片,如果设定为3000
即3
秒,那么图片展示到3
秒后,进入到下一个图片。
duration="{{duration}}"
为滑动动画时长,怎么理解呢?就是第一张图片切换到第二张图片的时长,即第一张滑出,第二张滑入到完,所用的时间长而已。
circular="{{circular}}"
为是否采用衔接滑动,怎么理解呢?衔接?如果这个属性不设定,那么如果轮播图是三张图片,第一张展示到第三张即最后展示完,它会返回到第一张,那样的效果会不好看。如果设定了该属性,且为true
的话,那么展示完后,直接进入到第一张图的界面。
<!--index.wxml--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='{{circular}}' current="0"> // 用于展示轮播图效果 <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
属性 |
说明 |
---|---|
indicator-dots |
表示显示面板的指示点,图片下的小圆圈 |
indicator-color |
表示指示点的颜色 |
indicator-active-color |
表示当前选中的指示点颜色 |
autoplay |
表示为是否自动切换 |
current |
表示当前所在的滑块 index |
current-item-id |
当前所在滑块的 item-id,不能与current被同时指定 |
interval |
表示自动切换时间间隔 |
duration |
表示为滑动动画时长 |
circular |
表示是否采用衔接滑动 |
previous-margin |
表示前边距,用于露出前一项的一小部分,接受 px 和 rpx 值,就是在整块模板中露出前一项的一小部分 |
next-margin |
表示后边距,与上述同理 |
display-multiple-items |
表示显示的滑块数量,就是显示多少张图在界面上,默认为1,如果定位2,那么就两张图片设定在界面上,界面各自分一半 |
skip-hidden-item-layout |
表示是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
bindchange |
current 改变时会触发 change 事件,event.detail = {current: current, source: source} |
bindanimationfinish |
动画结束时会触发 animationfinish 事件,event.detail 同上 |
//index.js 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: true, circular: true, autoplay: true, interval: 2000, 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 }) } })
在js
中图片资源来源于官方文档,四种改变效果函数,changeIndicatorDots
(显示指示点),changeAutoplay
(是否自动轮播),intervalChange
(展示效果时长),durationChange
(切换时间时长)
/**index.wxss**/ .slide-image{ width: 100%; }
wxss
只是让图片宽度占满父元素而已。
注意事项.png
检测source
字段判断是否由于用户触摸引起 ^ v ^张家口小程序开发基础-swiper 滑块视图容器