移动端列表左滑和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事件,否则无效。