關於小程式swiper的問題
程式碼
在官方示例上給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複製程式碼