当前位置：首页 > JavaScript

js 实现手机滑动

2026-01-30 10:10:23JavaScript

实现手机滑动效果

在JavaScript中实现手机滑动效果通常涉及监听触摸事件（touchstart、touchmove、touchend），计算滑动距离并触发相应的交互逻辑。以下是实现的基本方法：

监听触摸事件

通过添加事件监听器捕获用户的触摸行为：

js 实现手机滑动

const element = document.getElementById('slider');
let startX, moveX;

element.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
});

element.addEventListener('touchmove', (e) => {
    moveX = e.touches[0].clientX;
    const diffX = moveX - startX;
    // 根据diffX执行滑动逻辑
});

element.addEventListener('touchend', () => {
    // 滑动结束后的处理
});

计算滑动方向

通过比较起始点和移动点的坐标差判断滑动方向：

js 实现手机滑动

element.addEventListener('touchend', () => {
    const threshold = 50; // 滑动阈值
    if (moveX - startX > threshold) {
        // 向右滑动
    } else if (startX - moveX > threshold) {
        // 向左滑动
    }
});

添加动画效果

使用CSS过渡或transform实现平滑滑动：

element.style.transform = `translateX(${diffX}px)`;

完整示例代码

结合触摸事件和动画的完整实现：

const slider = document.getElementById('slider');
let startX, currentX, isDragging = false;

slider.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX;
    isDragging = true;
});

slider.addEventListener('touchmove', (e) => {
    if (!isDragging) return;
    currentX = e.touches[0].clientX;
    const diffX = currentX - startX;
    slider.style.transform = `translateX(${diffX}px)`;
});

slider.addEventListener('touchend', () => {
    isDragging = false;
    const threshold = 100;
    if (currentX - startX > threshold) {
        // 向右滑动逻辑
    } else if (startX - currentX > threshold) {
        // 向左滑动逻辑
    }
    slider.style.transform = 'translateX(0)';
});