实现原生js的功能: 手机端下滑松手后, 在调用接口

问:

if (isMobileOrTablet()) {
    console.log('手机端');

    // 定义一个标志来记录是否已经触发了handleSwipeUp()
    var swipeUpTriggered = false;

    // 记录touchstart时的触摸点位置
    var touchStartY = null;

    // 监听touchstart事件，用于判断用户是否处于顶部并开始下拉
    document.addEventListener('touchstart', function(e) {
        // 判断是否在页面顶部
        if (window.scrollY === 0) {
            // 记录touchstart时的触摸点位置
            touchStartY = e.touches[0].clientY;
        }
    });

    // 监听touchmove事件，用于判断是否正在向下滑动
    document.addEventListener('touchmove', function(e) {
        // 如果touchStartY没有记录值，直接返回
        if (touchStartY === null) {
            return;
        }

        // 计算当前触摸点的移动距离
        var touchMoveY = e.touches[0].clientY;

        // 如果向下滑动（即触摸点向下移动）且handleSwipeUp()未被触发过
        if (touchMoveY > touchStartY && !swipeUpTriggered) {
            console.log('长下滑');
            handleSwipeUp();
            swipeUpTriggered = true; // 标记为已触发
        }
    });
}
这段代码是正确的, 但现在我希望下滑松开手后再调用handleSwipeUp();

回答:

要实现在用户下滑松开手后再调用 `handleSwipeUp()`，可以修改代码逻辑来监听 `touchend` 事件，并在该事件中处理滑动结束的逻辑。以下是修改后的代码：


if (isMobileOrTablet()) {
    console.log('手机端');

    // 定义一个标志来记录是否已经触发了handleSwipeUp()
    var swipeUpTriggered = false;

    // 记录touchstart时的触摸点位置
    var touchStartY = null;

    // 监听touchstart事件，用于判断用户是否处于顶部并开始下拉
    document.addEventListener('touchstart', function(e) {
        // 判断是否在页面顶部
        if (window.scrollY === 0) {
            // 记录touchstart时的触摸点位置
            touchStartY = e.touches[0].clientY;
        }
    });

    // 监听touchmove事件，用于判断是否正在向下滑动
    document.addEventListener('touchmove', function(e) {
        // 如果touchStartY没有记录值，直接返回
        if (touchStartY === null) {
            return;
        }

        // 计算当前触摸点的移动距离
        var touchMoveY = e.touches[0].clientY;

        // 如果向下滑动（即触摸点向下移动）且handleSwipeUp()未被触发过
        if (touchMoveY > touchStartY && !swipeUpTriggered) {
            console.log('长下滑');
            // 不立即调用handleSwipeUp()，而是等待touchend事件
            swipeUpTriggered = true; // 标记为已触发
        }
    });

    // 监听touchend事件，处理滑动结束后的逻辑
    document.addEventListener('touchend', function(e) {
        // 如果已经触发了下滑操作且handleSwipeUp()未被调用过
        if (swipeUpTriggered) {
            handleSwipeUp();
            swipeUpTriggered = false; // 重置标志
        }

        // 重置touchStartY
        touchStartY = null;
    });
}


在修改后的代码中，我们增加了对 `touchend` 事件的监听。当用户滑动手指后松开时，会检查 `swipeUpTriggered` 是否为 `true`，如果是，则调用 `handleSwipeUp()`，然后重置 `swipeUpTriggered` 为 `false`。这样就实现了在用户下滑松开手后再调用 `handleSwipeUp()` 的功能。