題外話：
- 百度找了一圈沒看到好用的饲梭，自己判斷一下吧，順便分享給大家焰檩。
- 其實也就是判斷到底是上下左右哪個方向的滑動啦憔涉。
- 話說，我寫這個的時候析苫，到底是滑動兜叨，還是劃動，這兩個詞糾結了好久~
1. 在wxml文件中綁定事件
綁定三個事件：touchstart衩侥、touchend国旷、touchcancel，分別對應三個函數(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;//最小偏移量，低于這個值不響應滑動處理
var minTime = 60;// 最小時間爱榔，單位：毫秒被环，低于這個值不響應滑動處理
var startX = 0;//開始時的X坐標
var startY = 0;//開始時的Y坐標
var startTime = 0;//開始時的毫秒數(shù)
如圖：
image
2.2 觸摸開始事件，初始化startX详幽、startY和startTime蛤售；
這里主要是在手指剛觸摸的屏幕的時候，獲取最初的x妒潭、y坐標。我們把這個當做初始坐標揣钦。
/**
* 觸摸開始事件雳灾，初始化startX、startY和startTime
*/
touchStart: function (e) {
console.log('touchStart', e)
startX = e.touches[0].pageX; // 獲取觸摸時的x坐標
startY = e.touches[0].pageY; // 獲取觸摸時的x坐標
startTime = new Date().getTime();//獲取毫秒數(shù)
},
如圖：
image
2.3 觸摸取消事件
觸摸取消事件：手指觸摸動作被打斷冯凹，如來電提醒谎亩，彈窗炒嘲。
當觸摸事件被取消中斷的時候匈庭，要重置startX夫凸、startY、startTime三個的數(shù)值阱持。
/**
* 觸摸取消事件 （手指觸摸動作被打斷夭拌，如來電提醒，彈窗）衷咽，要將startX鸽扁、startY和startTime重置
*/
touchCancel: function (e) {
startX = 0;//開始時的X坐標
startY = 0;//開始時的Y坐標
startTime = 0;//開始時的毫秒數(shù)
},
如圖：
image
2.4 觸摸結束事件，主要的判斷在這里镶骗；
注：這里注釋較多桶现，為了便于理解，強迫癥可以刪掉鼎姊。
簡單畫了個分析手勢類型的表格骡和，便于理解。
| 圖示 | 名稱 | 條件1（偏移量x或者y要大于最小偏移量） | 條件2（可以判斷出是左右滑動還是上下滑動） | 條件3（判斷偏移量的正負） |
|---|---|---|---|---|
| ← | 左劃 | Math.abs(偏移量 )>= minOffset | Math.abs(x偏移量) > Math.abs(y偏移量) | x偏移量 < 0 |
| → | 右劃 | 同上 | 同左劃 | x偏移量 > 0 |
| ↑ | 上劃 | 同上 | Math.abs(x偏移量) < Math.abs(y偏移量) | y偏移量 < 0 |
| ↓ | 下劃 | 同上 | 同上劃 | y偏移量 > 0 |
js代碼如下：
/**
* 觸摸結束事件相寇，主要的判斷在這里
*/
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;//計算滑動時間
//開始判斷
//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（判斷偏移量的正負）
if (xOffset < 0) {
console.log('向左滑動')
} else {
console.log('向右滑動')
}
} else if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset) >= minOffset) {
//上下滑動
//③條件3（判斷偏移量的正負）
if (yOffset < 0) {
console.log('向上滑動')
} else {
console.log('向下滑動')
}
}
} else {
console.log('滑動時間過短', touchTime)
}
},
如圖：
image
3. 測試滑動
嘗試滑動，查看控制臺裆赵。
如圖：
image
至此东囚，在微信小程序中，簡單的手勢滑動我們就已經(jīng)實現(xiàn)了战授。
轉自：夢游人布拿拿
