当前位置：首页 > JavaScript

js 实现手机滑动

2026-03-01 01:14:47JavaScript

监听触摸事件

使用 touchstart、touchmove 和 touchend 事件来检测用户触摸屏幕的动作。这些事件提供了触摸点的位置信息，可用于计算滑动方向和距离。

let startX, startY;

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

element.addEventListener('touchmove', (e) => {
  const moveX = e.touches[0].clientX;
  const moveY = e.touches[0].clientY;
  const diffX = moveX - startX;
  const diffY = moveY - startY;
});

计算滑动方向

通过比较 diffX 和 diffY 的绝对值来判断滑动方向。通常设置一个阈值来避免误判。

js 实现手机滑动

element.addEventListener('touchend', (e) => {
  const diffX = e.changedTouches[0].clientX - startX;
  const diffY = e.changedTouches[0].clientY - startY;

  if (Math.abs(diffX) > Math.abs(diffY)) {
    if (diffX > 0) {
      console.log('向右滑动');
    } else {
      console.log('向左滑动');
    }
  } else {
    if (diffY > 0) {
      console.log('向下滑动');
    } else {
      console.log('向上滑动');
    }
  }
});

实现滑动动画

使用 CSS 过渡或 JavaScript 动画来实现滑动效果。可以通过修改元素的 transform 属性来实现平滑移动。

js 实现手机滑动

element.addEventListener('touchmove', (e) => {
  const moveX = e.touches[0].clientX - startX;
  element.style.transform = `translateX(${moveX}px)`;
});

element.addEventListener('touchend', (e) => {
  const moveX = e.changedTouches[0].clientX - startX;
  if (Math.abs(moveX) > 100) {
    element.style.transition = 'transform 0.3s ease';
    element.style.transform = moveX > 0 ? 'translateX(100%)' : 'translateX(-100%)';
  } else {
    element.style.transition = 'transform 0.3s ease';
    element.style.transform = 'translateX(0)';
  }
});

防止页面滚动

在滑动元素时，可能需要阻止默认的页面滚动行为。可以通过调用 e.preventDefault() 来实现。

element.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const moveX = e.touches[0].clientX - startX;
  element.style.transform = `translateX(${moveX}px)`;
});

使用第三方库

如果不想手动实现滑动逻辑，可以使用现成的库如 Hammer.js。它提供了丰富的触摸手势支持，包括滑动、缩放、旋转等。

const hammer = new Hammer(element);
hammer.on('swipe', (e) => {
  if (e.direction === Hammer.DIRECTION_LEFT) {
    console.log('向左滑动');
  } else if (e.direction === Hammer.DIRECTION_RIGHT) {
    console.log('向右滑动');
  }
});