代码
在官方示例上给swiper
添加了current``bindchange``circular
添加了一个button``bindtap
用于切换下一张
index.wxml
<swiper indicator-dots="{{indicatorDots}}"
bindchange="swiperChange"
current="{{index}}"
circular="true"
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>
<button bindtap="nextSwiper"> 下一张 </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration
index.js
/**
* create by ZenoTian
*/
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,
index: 2
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
nextSwiper: function (e) {
let {index} = this.data
index === 2
?index = 0
:index++
console.log(`下一张:${index}`)
this.setData({
index
})
},
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
})
},
swiperChange: function (e) {
console.log('bindchange事件', `this.data.index:${this.data.index} e.detail.current:${e.detail.current}`)
}
})
问题1:手动赋值current值,衔接滑动无效
点击下一张,通过给setData
改变swiper
的current
值,在从最后一张切换至第一张时,虽然设置了circular
,但是不会有衔接滑动的效果,而是从尾部一路溜到了头。
问题2:绑定的current的值,滑动并不会改变
通过给swiper
的current
绑定了this.data.index
默认值是生效的,但是在手滑滑块的时候,并不会自动改变this.data.index
的值。
通过bindchange
的打印可以看出来。this.data.index
的值是永远不会变的。
所以这时候current
和this.data.index
是不照应的。
例如:向右滑动
bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:2 e.detail.current:0
bindchange事件 this.data.index:2 e.detail.current:2
bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:2 e.detail.current:0
在官方文档中
如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 >setData 被不停地调用,因而通常情况下请不要这样使用
如果想让current
和this.data.index
对照,还是需要在bindchange
的事件回调函数中使用setData
改变current
值。
swiperChange: function (e) {
console.log('bindchange事件',`this.data.index:${this.data.index} e.detail.current:${e.detail.current}`)
this.setData({
index: e.detail.current
})
}
问题3:控制current的值切换,与滑动切换代码结果不一样
如果采取了在bindchange
的事件回调函数中使用setData
改变current
值。
点击下一张:给this.data.index
赋值后触发的bindchange
事件回调中的,this.data.index
与e.detail.current
的值相同。
下一张:0
bindchange事件 this.data.index:0 e.detail.current:0
下一张:1
bindchange事件 this.data.index:1 e.detail.current:1
下一张:2
bindchange事件 this.data.index:2 e.detail.current:2
下一张:0
bindchange事件 this.data.index:0 e.detail.current:0
下一张:1
bindchange事件 this.data.index:1 e.detail.current:1
手动滑动时:bindchange
事件回调中的,this.data.index
的值会是上一次的值
bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:1 e.detail.current:0
bindchange事件 this.data.index:0 e.detail.current:2
bindchange事件 this.data.index:2 e.detail.current:1
bindchange事件 this.data.index:1 e.detail.current:0