当前位置：首页 > JavaScript

js实现触摸下拉列表

2026-01-31 06:52:42JavaScript

实现触摸下拉列表的步骤

监听触摸事件

使用touchstart、touchmove和touchend事件来检测用户的触摸操作。这些事件可以捕获触摸的开始、移动和结束。

const list = document.getElementById('dropdown-list');

list.addEventListener('touchstart', handleTouchStart, false);
list.addEventListener('touchmove', handleTouchMove, false);
list.addEventListener('touchend', handleTouchEnd, false);

记录触摸位置

在touchstart事件中记录初始触摸位置，用于计算后续的滑动距离。

let startY;

function handleTouchStart(e) {
    startY = e.touches[0].clientY;
}

计算滑动距离

在touchmove事件中计算当前触摸位置与初始位置的垂直距离，判断是否为下拉操作。

function handleTouchMove(e) {
    const currentY = e.touches[0].clientY;
    const distanceY = currentY - startY;

    if (distanceY > 0) {
        e.preventDefault(); // 阻止默认行为
        list.style.transform = `translateY(${distanceY}px)`;
    }
}

触发下拉动作

在touchend事件中判断滑动距离是否达到阈值，如果是则触发下拉动作。

function handleTouchEnd(e) {
    const endY = e.changedTouches[0].clientY;
    const distanceY = endY - startY;

    if (distanceY > 50) { // 阈值设为50px
        // 触发下拉刷新或其他动作
        console.log('下拉动作触发');
    }
    list.style.transform = 'translateY(0)';
}

添加动画效果

为下拉动作添加平滑的动画效果，提升用户体验。

list.style.transition = 'transform 0.3s ease';

处理边界情况

确保下拉列表在顶部时才能触发下拉动作，避免与其他滚动冲突。

function handleTouchMove(e) {
    if (list.scrollTop > 0) return;

    const currentY = e.touches[0].clientY;
    const distanceY = currentY - startY;

    if (distanceY > 0) {
        e.preventDefault();
        list.style.transform = `translateY(${distanceY}px)`;
    }
}

完整代码示例

以下是一个完整的触摸下拉列表实现示例：

const list = document.getElementById('dropdown-list');
let startY;

list.addEventListener('touchstart', handleTouchStart, false);
list.addEventListener('touchmove', handleTouchMove, false);
list.addEventListener('touchend', handleTouchEnd, false);

list.style.transition = 'transform 0.3s ease';

function handleTouchStart(e) {
    startY = e.touches[0].clientY;
}

function handleTouchMove(e) {
    if (list.scrollTop > 0) return;

    const currentY = e.touches[0].clientY;
    const distanceY = currentY - startY;

    if (distanceY > 0) {
        e.preventDefault();
        list.style.transform = `translateY(${distanceY}px)`;
    }
}

function handleTouchEnd(e) {
    const endY = e.changedTouches[0].clientY;
    const distanceY = endY - startY;

    if (distanceY > 50) {
        console.log('下拉动作触发');
        // 这里可以添加下拉刷新的逻辑
    }
    list.style.transform = 'translateY(0)';
}