触摸滑动翻页-》绑定触摸事件

版权声明：xianghai https://blog.csdn.net/qq_37207413/article/details/86538809

//////////////////////////////////////////////////////////
//触摸滑动翻页-》绑定触摸事件
var viewport = document.getElementById('contentBox');
var currentPosition = 0; // 记录当前页面位置
var startX, startY;
var initialPos = 0;  // 手指按下的屏幕位置
var moveLength = 0;  // 手指当前滑动的距离
var direction = 'left'; // 滑动的方向
var isMove = false; // 是否发生左右滑动
var startT = 0; // 记录手指按下去的时间
var isTouchEnd = true; // 标记当前滑动是否结束(手指已离开屏幕)
var val = document.getElementById("val");
// 手指放在屏幕上
viewport.addEventListener('touchstart', function (e) {
    // e.preventDefault();
    // 单手指触摸或者多手指同时触摸，禁止第二个手指延迟操作事件
    if (e.touches.length === 1 || isTouchEnd) {
        var touch = e.touches[0];
        startX = touch.pageX;
        startY = touch.pageY;
        initialPos = currentPosition;   // 本次滑动前的初始位置
        viewport.style.webkitTransition = ''; // 取消动画效果
        startT = +new Date(); // 记录手指按下的开始时间
        isMove = false; // 是否产生滑动
        isTouchEnd = false; // 当前滑动开始
    }
});

// 手指在屏幕上滑动，页面跟随手指移动
viewport.addEventListener('touchmove', function (e) {
    // e.preventDefault();
    // 如果当前滑动已结束，不管其他手指是否在屏幕上都禁止该事件
    // if (isTouchEnd) return ;
    var touch = e.touches[0];
    var deltaX = touch.pageX - startX;
    var deltaY = touch.pageY - startY;
    isMove = true;
    moveLength = deltaX;
    direction = deltaX > 0 ? 'right' : 'left'; // 判断手指滑动的方向
    $("#contentBox").css({"transform": "translateX(" + deltaX + "px)"});
});
// 手指离开屏幕时，计算最终需要停留在哪一页
viewport.addEventListener('touchend', function (e) {
    // e.preventDefault();
    // 计算手指在屏幕上停留的时间
    var deltaT = +new Date() - startT;
    // 发生了滑动，并且当前滑动事件未结束
    if (isMove && !isTouchEnd) {
        isTouchEnd = true; // 标记当前完整的滑动事件已经结束
        // 使用动画过渡让页面滑动到最终的位置
        // 如果滑动距离小于屏幕的50%，则退回到上一页
        if (Math.abs(moveLength) > 150 && direction == 'right') {
            $("#contentBox").css({"transform": "translateX(0px)"});
            if (global_currentPage == 0) {
                return false;
            }
            previousPage(global_total);
        }

        else if (Math.abs(moveLength) > 150 && direction == 'left') {
            $("#contentBox").css({"transform": "translateX(0px)"});
            // 如果滑动距离大于屏幕的50%，则滑动到下一页
            if (global_currentPage == global_total) {
                return false;

            }

            nextPage(global_total);
        } else {

            $("#contentBox").css({"transform": "translateX(0px)"});
            return false;

        }


    }
});


//////////////////////////////////////////////////////////////////////////////////////////