js判断上下滑动

在JavaScript中判断上下滑动主要通过监听触摸事件（touchstart、touchmove）来实现。以下是具体的实现步骤和相关解释：

基本概念

触摸事件：包括touchstart（触摸开始）、touchmove（触摸移动）、touchend（触摸结束）等。
事件对象：这些事件的事件对象包含了触摸点的信息，如坐标（clientY或pageY）。

实现步骤

记录初始位置：在touchstart事件中记录触摸起始的Y坐标。
计算滑动距离：在touchmove事件中获取当前的Y坐标，并与初始位置进行比较，计算滑动的距离和方向。
判断滑动方向：根据滑动的距离和方向判断是上滑还是下滑。

示例代码

let startY = 0; // 记录触摸起始位置
let isMoving = false; // 标记是否正在滑动

// 监听touchstart事件
document.addEventListener('touchstart', function(event) {
    startY = event.touches[0].clientY; // 记录初始Y坐标
    isMoving = true;
}, false);

// 监听touchmove事件
document.addEventListener('touchmove', function(event) {
    if (!isMoving) return; // 如果没有开始滑动，直接返回

    let currentY = event.touches[0].clientY; // 获取当前Y坐标
    let deltaY = currentY - startY; // 计算滑动的距离

    if (Math.abs(deltaY) > 50) { // 设置一个阈值，比如50px
        if (deltaY > 0) {
            console.log('下滑');
            // 执行下滑相关的操作
        } else {
            console.log('上滑');
            // 执行上滑相关的操作
        }
        isMoving = false; // 重置滑动标记
    }
}, false);

// 监听touchend事件（可选）
document.addEventListener('touchend', function(event) {
    isMoving = false; // 确保滑动结束
}, false);