題外話：
- 百度找了一圈沒看到好用的，自己判斷一下吧，順便分享給大家。
- 其實(shí)也就是判斷到底是上下左右哪個方向的滑動啦。
- 話說，我寫這個的時候，到底是滑動，還是劃動，這兩個詞糾結(jié)了好久~
1. 在wxml文件中綁定事件
綁定三個事件：touchstart、touchend、touchcancel，分別對應(yīng)三個函數(shù)：touchStart、touchEnd、touchCancel
<!--pages/today/today.wxml-->
<view style="width:100%;height:100%;"
bind:touchstart="touchStart"
bind:touchend="touchEnd"
bind:touchcancel="touchCancel">
</view>
如圖：
image
2. 在js文件中，對事件函數(shù)處理
2.1 在Page外部，定義參數(shù)和變量；
var minOffset = 30;//最小偏移量，低于這個值不響應(yīng)滑動處理
var minTime = 60;// 最小時間，單位：毫秒，低于這個值不響應(yīng)滑動處理
var startX = 0;//開始時的X坐標(biāo)
var startY = 0;//開始時的Y坐標(biāo)
var startTime = 0;//開始時的毫秒數(shù)
如圖：
image
2.2 觸摸開始事件，初始化startX、startY和startTime；
這里主要是在手指剛觸摸的屏幕的時候，獲取最初的x、y坐標(biāo)。我們把這個當(dāng)做初始坐標(biāo)。
/**
* 觸摸開始事件，初始化startX、startY和startTime
*/
touchStart: function (e) {
console.log('touchStart', e)
startX = e.touches[0].pageX; // 獲取觸摸時的x坐標(biāo)
startY = e.touches[0].pageY; // 獲取觸摸時的x坐標(biāo)
startTime = new Date().getTime();//獲取毫秒數(shù)
},
如圖：
image
2.3 觸摸取消事件
觸摸取消事件：手指觸摸動作被打斷，如來電提醒，彈窗。
當(dāng)觸摸事件被取消中斷的時候，要重置startX、startY、startTime三個的數(shù)值。
/**
* 觸摸取消事件 （手指觸摸動作被打斷，如來電提醒，彈窗），要將startX、startY和startTime重置
*/
touchCancel: function (e) {
startX = 0;//開始時的X坐標(biāo)
startY = 0;//開始時的Y坐標(biāo)
startTime = 0;//開始時的毫秒數(shù)
},
如圖：
image
2.4 觸摸結(jié)束事件，主要的判斷在這里；
注：這里注釋較多，為了便于理解，強(qiáng)迫癥可以刪掉。
簡單畫了個分析手勢類型的表格，便于理解。
| 圖示 | 名稱 | 條件1（偏移量x或者y要大于最小偏移量） | 條件2（可以判斷出是左右滑動還是上下滑動） | 條件3（判斷偏移量的正負(fù)） |
|---|---|---|---|---|
| ← | 左劃 | Math.abs(偏移量 )>= minOffset | Math.abs(x偏移量) > Math.abs(y偏移量) | x偏移量 < 0 |
| → | 右劃 | 同上 | 同左劃 | x偏移量 > 0 |
| ↑ | 上劃 | 同上 | Math.abs(x偏移量) < Math.abs(y偏移量) | y偏移量 < 0 |
| ↓ | 下劃 | 同上 | 同上劃 | y偏移量 > 0 |
js代碼如下：
/**
* 觸摸結(jié)束事件，主要的判斷在這里
*/
touchEnd: function (e) {
console.log('touchEnd', e)
var endX = e.changedTouches[0].pageX;
var endY = e.changedTouches[0].pageY;
var touchTime = new Date().getTime() - startTime;//計(jì)算滑動時間
//開始判斷
//1.判斷時間是否符合
if (touchTime >= minTime) {
//2.判斷偏移量：分X、Y
var xOffset = endX - startX;
var yOffset = endY - startY;
console.log('xOffset', xOffset)
console.log('yOffset', yOffset)
//①條件1（偏移量x或者y要大于最小偏移量）
//②條件2（可以判斷出是左右滑動還是上下滑動）
if (Math.abs(xOffset) >= Math.abs(yOffset) && Math.abs(xOffset) >= minOffset) {
//左右滑動
//③條件3（判斷偏移量的正負(fù)）
if (xOffset < 0) {
console.log('向左滑動')
} else {
console.log('向右滑動')
}
} else if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= minOffset) {
//上下滑動
//③條件3（判斷偏移量的正負(fù)）
if (yOffset < 0) {
console.log('向上滑動')
} else {
console.log('向下滑動')
}
}
} else {
console.log('滑動時間過短', touchTime)
}
},
如圖：
image
3. 測試滑動
嘗試滑動，查看控制臺。
如圖：
image
至此，在微信小程序中，簡單的手勢滑動我們就已經(jīng)實(shí)現(xiàn)了。
轉(zhuǎn)自：夢游人布拿拿
