移动端列表左滑和ios系统默认上下滑动回弹效果的兼容性问题

最新推荐文章于 2023-03-29 13:36:34 发布

原创最新推荐文章于 2023-03-29 13:36:34 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#移动端 #ios #左滑 #ios默认回弹 #兼容性

jquery移动前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种解决移动端列表左滑操作与iOS系统默认上下滑动回弹效果之间的兼容性问题的方法。通过监听touchstart和touchmove事件，计算X轴和Y轴上的滑动距离，并比较这两个方向的距离来确定用户的滑动意图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端列表左滑和ios系统默认上下滑动回弹效果的兼容性问题

解决方法如下：
步骤：1：获取滑动事件的起点坐标
2：监听滑动事件并分别计算在X，Y轴滑动的长度
3：比较X，Y轴长度的绝对值并做后续操作

var startX,startY,X,Y;  //定义起点的横纵坐标 以及滑动长度
$('body').on('touchstart',function (e) {   
var touch = e.originalEvent.targetTouches[0];
startX = touch.pageX;    
startY = touch.pageY;
});
document.body.addEventListener('touchmove',function (e) {
var touches = event.touches[0];
delta = {
x:touches.pageX - startX,
y:touches.pageY - startY
    };
if(Math.abs(delta.x) > Math.abs(delta.y)){
        event.preventDefault();
}
},{passive:false});

思路就是获取左右滑动的长度，和上下滑动的长度，两者进行比较，当左右滑动长度大于上下滑动长度即判断为左滑，执行左滑操作，否则，为上下滑动操作。
注意：一定要监听touchmove事件，否则无效。