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

本文介绍了一种解决移动端列表左滑操作与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事件,否则无效。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值