移動端根據手指滑動操作判斷滑動方向
文章目錄
- 移動端根據手指滑動操作判斷滑動方向
- 前言
- 設計思路：
- 一、獲取開始和結束坐標
- 二、根據獲得的坐標計算與水平軸的夾角
- 三、根據夾角判斷滑動方向
- 四、優化
- 思路：
- 1.在touchstart滑動開始時記錄當前時間，在滑動結束時獲取當前時間，根據時間差來增強判斷
- 2.根據滑動距離來增強判斷
- 總結
前言
其實移動端有關滑動操作有很多UI組件，比如swiper等，那么關于原生的手指滑動方向操作有關解答很是片面，大部分博客以及文章呢，都是通過觸摸開始以及觸摸結束來計算兩個點之間的夾角，來判斷方向，這是人們很容易想到的解決方案，那么這種方案其實計算并不是特別準確，那今天我給大家講的是另外一個方案，觸摸開始及結束產生的線與水平線之間的夾角以及滑動時間和滑動距離判斷滑動方向，
設計思路：
1.根據移動端touchstart和touchend方法獲取手指觸摸螢屏的開始坐標和結束坐標
2.根據兩個坐標計算與水平方向的夾角
3.根據夾角判斷當前移動的方向
一、獲取開始和結束坐標
我們通過touchstart和touchend方法的event物件獲取，
1 /* 移動開始 */
2 handletouchstart(event) {
3 //移動的x軸坐標
4 //event.changedTouches[0].clientX;
5 //移動的y軸坐標
6 //lastY = event.changedTouches[0].clientY;
7 this.last = event.changedTouches[0];
8 },
ps:移動結束獲取坐標和移動開始獲取坐標方式相同
二、根據獲得的坐標計算與水平軸的夾角
這里我們用到了Math.atan2方法，
atan2 方法回傳一個 -pi 到 pi 之間的數值，表示點 (x, y) 對應的偏移角度，這是一個逆時針角度，以弧度為單位，正X軸和點 (x, y) 與原點連線 之間，注意此函式接受的引數：先傳遞 y 坐標，然后是 x 坐標，
/* 獲取滑動直線與水平線的夾角 */
getLineAngle(x1, y1, x2, y2) {
var x = x1 - x2,
y = y1 - y2;
if (!x && !y) {
return 0;
}
var angle = (180 + Math.atan2(-y, -x) * 180 / Math.PI + 360) % 360;
return 360 - angle;
},
三、根據夾角判斷滑動方向
到這里我們就可以得到手指在螢屏之間滑動得到的角度，
四個方向滑動得到的角度
我們可以看到 第一個列印是手指向下滑動，第二個是向右滑動，第三個是向左滑動，第四個是向上滑動，
坐標系排列方式如下：
如圖：我們的坐標是逆襲向排列的，所以我們就可以根據得到的夾角判斷是向上還是向下滑動，
注意：因為我們是根據移動開始和結束做的角度計算，但是有一種情況當移動距離過短很有可能計算出來的角度等于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');
總結
移動端手指滑動方向，最主要的就是根據滑動開始和滑動結束兩個坐標，來計算兩個坐標生成的直線與水平方向的角度，以此來判斷移動的方向，
為了增強用戶體驗和程式的穩定，我們可以增加手指滑動的時間和距離來增強判斷，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297590.html
標籤：其他