移動應用滑動螢幕方向判斷解決方案

2022-03-11 02:15:16 字數 1081 閱讀 8621

滑動螢幕開啟相應功能操作。

1、使用者手動滑動螢幕,根據滑動的方向,開啟相應的功能(如:向上滑搖錢樹經驗明細,向下滑開啟任務明細,向左滑開啟聚寶盆物品檢視等功能),滑動事件捕獲問題。

3、html5提供的滑動事件,只能讀取到起點和終點座標,計算角度問題。

4、手機螢幕座標與標準座標系轉換問題。

1、滑動螢幕事件使用html5 的touchstart滑動開始事件和touchend滑動結束事件。

2、方向的判斷,以起點做平面座標系,與終點連線做直線,直線與x正半軸計算角度;我們以45度角為方向分割線,如:只要滑動角度大於等於45度且小於135度,則判斷它方向為向上滑。

3、使用math.atan2來計算起點與終點形成的直線角度。

4、仔細對比標準座標系與螢幕座標系,我們發現,標準座標系,上半軸為負值,要實現轉換,只需要調換y座標起點與終於位置即可。

處理**如下:

//返回角度

function getslideangle(dx, dy)

//根據起點和終點返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑動

function getslidedirection(startx, starty, endx, endy)

var angle = getslideangle(dx, dy);

if (angle >= -45 && angle < 45) else if (angle >= 45 && angle < 135) else if (angle >= -135 && angle < -45)

else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135))

return result;

}//滑動處理

var startx, starty;

document.addeventlistener('touchstart', function (ev) , false);

document.addeventlistener('touchend', function (ev)

}, false);

js判斷手指滑動方向(移動端)

varstartx,starty 獲得角度 function getangle angx,angy 根據起點終點返回方向 1向上 2向下 3向左 4向右 0未滑動 function getdirection startx,starty,endx,endy varangle getangle angx...

移動端網頁判斷手指觸控滑動的方向

判斷使用者手指滑動的方向,一種比較通用的解決方法就是,記錄使用者手指剛接觸螢幕的位置,然後減去使用者手指離開螢幕的位置,然後判斷這個值的正負。body on touchstart function e body on touchmove function e else if x 0 else if ...

Android 關於判斷使用者滑動方向

效果圖如下 預設是上下滑動 true 上下滑動 false 左右滑動 boolean slide true private float translationy private float dy float straty float downy float downx boolean hasmove...