微信小程序的picker-view bindChange 延遲問題

解決微信小程序的picker-view bindChange 延遲問題及解決思路

具體需求：如下圖, 上下滑動選擇身高，選擇完成之後點擊完成，要求獲取到所選擇的身高值

---

類似上面的需求，比如選擇出生年月、年齡之類都會碰到，但是在獲取值的時候，偶爾會發覺所獲取到的身高有問題，之所以有問題，主要是因爲身高值是在bindchange函數裏獲取，由於picker-view控件滾動時觸發bindChange函數的時間存在延遲，而剛好這時用戶點擊了完成按鈕，那獲取到的身高值可能是前一次觸發bindChange函數拿到的值，這就存在問題咯

查看微信小程序官方開發社區，也有很多帖子提到如上的問題，翻看了一部分帖子，也沒找到問題所在.

社區帖子鏈接

那隻能自己調試找找解決方案，調試下

//滾動選擇時觸發change事件
bindChange: function (e) {
    console.log("滾動中==" + JSON.stringify(e))
},
// 滾動開始
bindpickstart: function(e){
	console.log("開始滾動==" + JSON.stringify(e))
},
// 滾動結束
bindpickend: function(e){
	console.log("結束滾動==" + JSON.stringify(e))
},

<picker-view value="{{value}}" bindchange="bindChange" 
bindpickstart="bindpickstart" bindpickend="bindpickend"></picker-view>

滑動picker-view，結合log看下

可以看到當手指滑動picker-view時，首先滾動事件開始了，會觸發bindpickstart函數， 當滾動快結束時，先觸發bindChange函數，緊接着觸發bindpickend函數，滾動結束.

身高值是從bindChange函數獲取的，而我們是否能在 點擊完成的 時候, 先判斷picke-view是否還在滾動，還處於滾動狀態時，則不去獲取身高值，友好提醒下用戶； 而當滾動結束時，纔去獲取身高值.

接着用代碼說話吧

var isScroll = false
//滾動選擇時觸發change事件
bindChange: function (e) {
	 console.log("滾動中==" + JSON.stringify(e))
	 const val = e.detail.value
	 this.setData({
	    currstature: this.data.statures[val[0]],
	 })
},
// 滾動開始
bindpickstart: function(e){
	console.log("開始滾動==" + e)
	isScroll = true
},
//滾動結束
bindpickend: function(e){
	console.log("結束滾動==" + JSON.stringify(e))
	isScroll = false
},

//點擊完成按鈕事件
end: function (e) {
	 if(isScroll){
	    console.log("pickerView還沒滾動完")
	    return
	 }
	console.log('身高值： ', this.data.currstature)
}

執行起來，當處於滾動狀態時就去獲取值, log打印如下

---

當滾動結束時，去獲取身高值

---

好了，成功解決picker-view bindChange的延遲問題，解決思路就是當picker-view滾動結束時，再去獲取值。