移动端 uni-app 滑动事件精确判断手指滑动方向

Posted 2021-09-03 前端菜鸡儿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端 uni-app 滑动事件精确判断手指滑动方向相关的知识，希望对你有一定的参考价值。

移动端根据手指滑动操作判断滑动方向

设计思路：

　　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 },