js 手机端触屏滑动导航

// 节流函数示例
function throttle(func, wait) {
    let timeout = null;
    return function() {
        const context = this;
        const args = arguments;
        if (!timeout) {
            timeout = setTimeout(() => {
                timeout = null;
                func.apply(context, args);
            }, wait);
        }
    };
}

// 监听触摸事件并处理滑动逻辑
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', throttle(handleTouchMove, 100), false);

let xDown = null;
let yDown = null;

function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
}

function handleTouchMove(evt) {
    if (!xDown || !yDown) {
        return;
    }

    const xUp = evt.touches[0].clientX;
    const yUp = evt.touches[0].clientY;

    const xDiff = xDown - xUp;
    const yDiff = yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
        // 水平滑动处理逻辑
        if (xDiff > 0) {
            // 向左滑动
        } else {
            // 向右滑动
        }
    } else {
        // 垂直滑动处理逻辑
        if (yDiff > 0) {
            // 向上滑动
        } else {
            // 向下滑动
        }
    }

    xDown = null;
    yDown = null;
}