滑动操作

var startX, startY, isStart; //在外部声明startX以用于touchmove和touchend的函数中

$('nav').on('touchstart', function(evt) { //手指按倒屏幕上的坐标
    var target = evt.targetTouches[0] || evt.changedTouches[0]; //0表示取第一个手指即单指触摸
    startX = target.pageX;
    startY = target.pageY;
    isStart = 1;
});

$('nav').on('touchmove', function(evt) { //手指滑动到屏幕上的坐标
    if(1 !== isStart) {
        return;
    } else {
        isStart = 2;
    }
    var target = evt.targetTouches[0] || evt.changedTouches[0];
    var moveX = target.pageX;
    var moveY = target.pageY;
    var offsetX = moveX - startX; 
    var absX = Math.abs(offsetx); //X方向上的偏移量
    var absY = Math.abs(moveY - startY); //Y方向上的偏移量
    if(absX > absY) { 
        evt.preventDefault(); //水平滑动时阻止垂直方向的偏移量
    }
});

$('nav').on('touchend touchcancel', function(evt) {
    if(2 !== isStart) {  
        return; //若只有点击操作而无滑动则不执行下面操作
    } else {
        isStart = undefined;
    }
    var target = evt.targetTouches[0] || evt.changedTouches[0];
    var endX = target.pageX;
    var offsetX = endX - startX;
    if(offsetX > 30) {
        prev(); //水平向右滑动超过一定距离执行上一页
    } else if（offset < -30) {
        next(); //水平向左滑动超过一定距离执行下一页
    } else { 
        return;
    }
});

通过手指触摸屏幕和离开屏幕的坐标差来定义滑动

转载于:https://www.cnblogs.com/yusi97/p/4968494.html