当前位置：首页 > JavaScript

js实现手指下滑下拉

2026-01-31 06:48:08JavaScript

js实现手指下滑下拉

实现手指下滑下拉效果

在JavaScript中实现手指下滑下拉效果，通常需要监听触摸事件（touchstart、touchmove、touchend）并结合CSS过渡或动画来实现平滑的下拉效果。

监听触摸事件

const element = document.getElementById('pull-to-refresh');
let startY, currentY;

element.addEventListener('touchstart', (e) => {
    startY = e.touches[0].clientY;
    currentY = startY;
});

element.addEventListener('touchmove', (e) => {
    currentY = e.touches[0].clientY;
    const diff = currentY - startY;

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

element.addEventListener('touchend', (e) => {
    const diff = currentY - startY;

    if (diff > 100) {
        // 触发刷新逻辑
        refreshContent();
    }

    element.style.transform = 'translateY(0)';
    element.style.transition = 'transform 0.3s ease';

    setTimeout(() => {
        element.style.transition = '';
    }, 300);
});

刷新内容逻辑

function refreshContent() {
    // 显示加载指示器
    showLoadingIndicator();

    // 模拟异步加载
    setTimeout(() => {
        // 更新内容
        updateContent();
        // 隐藏加载指示器
        hideLoadingIndicator();
    }, 1000);
}

CSS样式

#pull-to-refresh {
    position: relative;
    overflow: hidden;
}

.loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

显示/隐藏加载指示器

function showLoadingIndicator() {
    const indicator = document.querySelector('.loading-indicator');
    indicator.style.display = 'flex';
}

function hideLoadingIndicator() {
    const indicator = document.querySelector('.loading-indicator');
    indicator.style.display = 'none';
}

注意事项

确保在touchmove事件中调用e.preventDefault()来阻止默认滚动行为
设置适当的阈值（如100px）来判断是否触发刷新
使用CSS过渡效果使下拉和回弹更平滑
考虑添加加载动画或状态指示器以提升用户体验

兼容性处理

对于不支持触摸事件的设备，可以添加鼠标事件作为后备：

element.addEventListener('mousedown', (e) => {
    startY = e.clientY;
    currentY = startY;
});

element.addEventListener('mousemove', (e) => {
    if (startY === null) return;
    currentY = e.clientY;
    // 其余逻辑与touchmove相同
});

element.addEventListener('mouseup', (e) => {
    // 逻辑与touchend相同
});

js实现手指下滑下拉