移動端根據手指滑動操作判斷滑動方向
設計思路：
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');
總結
移動端手指滑動方向，最主要的就是根據滑動開始和滑動結束兩個坐標，來計算兩個坐標生成的直線與水平方向的角度，以此來判斷移動的方向。
為了增強用戶體驗和程序的穩定，我們可以增加手指滑動的時間和距離來增強判斷。
大功告成！！！有不明白的歡迎留言交流！