jquery iscroll 怎么判断滑动方向

Posted 2023-04-09

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery iscroll 怎么判断滑动方向相关的知识，希望对你有一定的参考价值。

参考技术A $('body').on('touchstart', '#slide', function(e)
            var touch = e.originalEvent,
            startX = touch.changedTouches[0].pageX;
            startY = touch.changedTouches[0].pageY;
            slider.on('touchmove', function(e)
                e.preventDefault();
                touch = e.originalEvent.touches[0] ||
                    e.originalEvent.changedTouches[0];
                if (touch.pageX - startX > 10)
                    console.log("右划");
                    slider.off('touchmove');
                    showPrevious();
                 else if (touch.pageX - startX < -10)
                    console.log("左划");
                    slider.off('touchmove');
                    showNext();
                ;
                if (touch.pageY - startY > 10)
                    console.log("下划");
                 else if (touch.pageY - startY < -10)
                    console.log("上划");
                ;
            );

            // Return false to prevent image
            // highlighting on android
            return false;

        ).on('touchend', function()
            slider.off('touchmove');
        );

本回答被提问者采纳

移动端 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 },