關於微信小程序小視頻源碼的上下滑動，切換圖片的實現

這篇文章主要介紹了微信小程序小視頻源碼實現圖片滑動效果,結合實例形式分析了微信小程序小視頻源碼基於js組件的圖片切換效果相關實現技巧與操作注意事項,，通過上下滑動來切換圖片，需要的朋友可以參考下：
在wxml圖層，首先在image圖片上添加三個事件，bindtouchstart=”touchStart”（觸摸開始事件），bindtouchmove=”touchMove”（觸摸移動事件），bindtouchend=”touchEnd”（觸摸結束事件）。

<image bindtouchstart="touchStart"
  bindtouchmove="touchMove" bindtouchend="touchEnd" class="pause" src="{{image}}"></image>

接下來就是小視頻源碼處理邏輯，在js裏面。
該效果基於小程序的組件 scroll-view 開發的，利用bindscroll事件加載回調函數。
　　回調事件原理：
　　通過切換寬度和每個item的寬度從而獲取當前切換的item是第幾位，然後給對應的item加上選中class，其他的則去除選中class。
在小視頻源碼開發時首先要在data裏面定義我們需要的一些值

data: {
image：’圖片的地址’
touchDotY: 0, //觸摸時的原點的高度
touchMoveY: 0,//停止觸摸後的原點的高度
ismove:0, //是否滑動了
},

// 觸摸開始事件

touchStart: function (e) {
var touchDotY = e.touches[0].pageY; //觸摸時的高度
this.setData({
touchDotY: touchDotY, //把剛開始觸摸時的高度記錄下來
})
}, 

//觸摸移動的事件

touchMove: function (e) {
var touchMoveY = e.touches[0].pageY; //觸摸移動時的高度
this.setData({
touchMoveY: touchMoveY, //把觸摸移動後的高度記錄下來
ismove:1 //證明移動了
})
},

// 觸摸結束事件

touchEnd: function (e) {
var _that=this;
var touchDotY = _that.data.touchDotY; //觸摸時的原點的高度
var touchMoveY = _that.data.touchMoveY//停止觸摸後的原點的高度
if (touchMoveY == 0 || _that.data.ismove==0){ //首先判斷有沒

小視頻源碼有移動，如果沒有則停止運行

return 'fail';
}
if (touchDotY - touchMoveY>50){ //判斷原來的位置高度要大於

小視頻源碼移動後的表示向上滑

_that.data.setData({ //給圖片重新賦值然後圖片就自動替換了
image:’新圖片的地址’
})
return 'fail';
}
if (touchMoveY-touchDotY >50 ) { //判斷原來的位置高度要小於

小視頻源碼移動後的表示向下滑

_that.data.setData({ //給圖片重新賦值然後圖片就自動替換了
image:’新圖片的地址’
})
return 'fail';
}, 

這樣就完美的實現了小程序小視頻源碼上下滑動切換圖片的功能了。有時候一些酷炫的效果其實實現起來非常簡單，建議開發前先理清實現思路，雖然整個文章言簡意賅，能看懂就自然懂，樂在分享。
注意：
微信小程序小視頻源碼中替換圖片的邏輯一定要寫在觸摸結束後的事件裏面，不要寫在觸摸移動事件裏面，否則會替換多次圖片。
聲明：本篇文章爲小編原創文章，轉載請註明出處及作者。