如何准确获取移动端滑动时的瞬时速度？

UX-富水提问于 2026-03-01 16:50:22 阅读 437

交互

我在做移动端图片轮播，想根据用户手指滑动的速度来决定是否自动翻页。但用 touchstart 和 touchend 算出来的速度总是不准，有时候轻轻一划反而触发了快速翻页。

我试过用时间差和位移计算速度，但感觉忽略了加速度或者中间的滑动轨迹。下面是我目前的简化代码：

const handleTouchEnd = (e) => {
  const endTime = Date.now();
  const deltaX = e.changedTouches[0].clientX - startX;
  const timeDiff = endTime - startTime;
  const velocity = Math.abs(deltaX / timeDiff); // 单位：px/ms
  if (velocity > 0.5) console.log('快速滑动');
};

这个 velocity 阈值调来调去都不稳定，是不是应该采样更多 touchmove 的点？有没有更靠谱的做法？

我来解答赞 5 收藏

反馈

2 条解答

百里俊含 Lv1

哈，这个问题我踩过坑。只用 touchstart 和 touchend 两点计算速度确实不准，特别是用户滑动过程中有停顿或者变速的时候。

正确做法是在 touchmove 里采样多个点计算瞬时速度。我后来改成了这样：

let lastX = 0;

let lastTime = 0;

let velocities = [];



const handleTouchMove = (e) => {

  const nowX = e.touches[0].clientX;

  const nowTime = Date.now();



  if (lastTime) {

    const v = Math.abs((nowX - lastX) / (nowTime - lastTime));

    velocities.push(v);

    // 只保留最近5个采样点

    if (velocities.length > 5) velocities.shift();

  }



  lastX = nowX;

  lastTime = nowTime;

};



const handleTouchEnd = () => {

  // 取采样点平均值

  const avgVelocity = velocities.reduce((a,b)=>a+b,0) / velocities.length;

  if (avgVelocity > 0.3) console.log('快速滑动');

  velocities = []; // 清空采样

};

几个关键点：
1. 在 touchmove 里持续采样，记录最近5个点的速度
2. 最后取平均值而不是单次计算结果
3. 阈值我一般设在 0.3 左右比较合适

这个方案比两点计算稳定多了，实测能准确区分快滑和慢滑。记得在 touchend 里要清空采样数组，不然下次滑动会带着上次的数据。

2026-03-09 21:04

Top丶晨羲 Lv1

你这问题我也踩过坑，只算首尾两点肯定会翻车。用户手指滑到最后经常停顿一下再抬起来，这时候时间被拉长，速度就算废了。

正确的做法是采样 touchmove 的最后几个点，算瞬时速度才靠谱。复制这个：

let positions = [];



const handleTouchStart = (e) => {

  positions = [];

  positions.push({

    x: e.touches[0].clientX,

    time: Date.now()

  });

};



const handleTouchMove = (e) => {

  positions.push({

    x: e.touches[0].clientX,

    time: Date.now()

  });

  // 只保留最近100ms的数据点，太早的没用

  const now = Date.now();

  positions = positions.filter(p => now - p.time < 100);

};



const handleTouchEnd = (e) => {

  if (positions.length < 2) return;

  

  const first = positions[0];

  const last = positions[positions.length - 1];

  const deltaX = last.x - first.x;

  const timeDiff = last.time - first.time;

  

  // 防止除以0

  if (timeDiff === 0) return;

  

  const velocity = deltaX / timeDiff; // px/ms，正负代表方向

  

  // 这个阈值自己调，0.3-0.5比较常见

  if (Math.abs(velocity) > 0.3) {

    console.log('快速滑动，方向：', velocity > 0 ? '右' : '左');

  }

};

核心思路就是只看最近 100ms 内的滑动轨迹，这样不管用户最后停多久都不影响判断。positions 数组记得在 touchstart 时清空，不然会出 bug。

阈值 0.3 到 0.5 之间自己调，不同设备像素密度不一样，有条件的话可以用 devicePixelRatio 做个适配，不过一般直接调个大概值也够用了。

2026-03-01 17:03