移動端根據手指滑動操作判斷滑動方向
設計思路：
1.根據移動端touchstart和touchend方法獲取手指觸控式螢幕幕的開始座標和結束座標
2.根據兩個座標計算與水平方向的夾角
3.根據夾角判斷當前移動的方向
具體實現：
1.獲取開始和結束座標
1 /* 移動開始 */
2 handletouchstart(event) {
3 //event.changedTouches[0].clientX; 移動的x軸座標
4 //lastY = event.changedTouches[0].clientY; 移動的y軸座標
5 this.last = event.changedTouches[0];
6 },
ps:移動結束獲取座標和移動開始獲取座標方式相同
2.根據獲得的座標計算與水平軸的夾角
這裡我們用到了Math.atan2方法。
atan2 方法返回一個 -pi 到 pi 之間的數值，表示點 (x, y) 對應的偏移角度。這是一個逆時針角度，以弧度為單位，正X軸和點 (x, y) 與原點連線 之間。注意此函式接受的引數：先傳遞 y 座標，然後是 x 座標。
1 /* 獲取滑動直線與水平線的夾角 */
2 getLineAngle(x1, y1, x2, y2) {
3 var x = x1 - x2,
4 y = y1 - y2;
5 if (!x && !y) {
6 return 0;
7 }
8 var angle = (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
9 return 360 - angle;
10 },
3.根據夾角判斷滑動方向
到這裡我們就可以得到手指在螢幕之間滑動得到的角度。
我們可以看到 第一個列印是手指向下滑動，第二個是向右滑動，第三個是向左滑動，第四個是向上滑動。
如圖：我們的座標是逆襲向排列的，所以我們就可以根據得到的夾角判斷是向上還是向下滑動。
注意：因為我們是根據移動開始和結束做的角度計算，但是有一種情況當移動距離過短很有可能計算出來的角度等於0，90，180，270，360，所以做判斷時排除一下這五個角度。當然了移動的方向不可能是水平和垂直的我們可以做一個容錯區間來判斷。
至此我們就可以精確的判斷手指滑動的方向！
優化
思路：
我們可以在新增手指滑動的時間和滑動的距離來加強手指滑動的操作
1.在touchstart滑動開始時記錄當前時間，在滑動結束時獲取當前時間，根據時間差來增強判斷
1 let noeTime = Date.now() - this.lastTime;
2 console.log(noeTime, 'noetime');
2.根據滑動距離來增強判斷
1 /* 判斷移動距離 */
2 let distance = event.changedTouches[0].clientX - this.last.clientX;
3 console.log(distance, 'distance');
總結
移動端手指滑動方向，最主要的就是根據滑動開始和滑動結束兩個座標，來計算兩個座標生成的直線與水平方向的角度，以此來判斷移動的方向。
為了增強使用者體驗和程式的穩定，我們可以增加手指滑動的時間和距離來增強判斷。
大功告成！！！有不明白的歡迎留言交流！