当前位置：首页 > VUE

vue实现触摸滚动列表

2026-02-20 15:28:25VUE

实现触摸滚动列表的基本思路

在Vue中实现触摸滚动列表，通常需要结合原生DOM事件和CSS样式。通过监听touchstart、touchmove和touchend事件，计算手指移动距离，动态调整列表的transform属性实现滚动效果。

监听触摸事件

在Vue组件的mounted钩子中，为列表容器添加触摸事件监听器。需要阻止默认行为以避免页面整体滚动。

mounted() {
  const listElement = this.$refs.list;
  listElement.addEventListener('touchstart', this.handleTouchStart, { passive: false });
  listElement.addEventListener('touchmove', this.handleTouchMove, { passive: false });
  listElement.addEventListener('touchend', this.handleTouchEnd);
}

记录触摸起始位置

在touchstart事件中记录初始触摸位置和当前滚动位置。

handleTouchStart(e) {
  this.startY = e.touches[0].clientY;
  this.startScrollTop = this.$refs.list.scrollTop;
  this.isScrolling = true;
}

计算滚动距离

在touchmove事件中计算手指移动距离，更新列表滚动位置。需要添加惯性滚动效果时，可以记录移动速度。

handleTouchMove(e) {
  if (!this.isScrolling) return;
  e.preventDefault();

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

  this.$refs.list.scrollTop = this.startScrollTop - deltaY;

  // 记录最后移动时间和位置，用于计算惯性
  this.lastY = currentY;
  this.lastTime = Date.now();
}

处理惯性滚动

在touchend事件中根据最后移动速度实现惯性滚动效果。可以使用requestAnimationFrame实现平滑动画。

handleTouchEnd() {
  this.isScrolling = false;

  // 计算速度
  const now = Date.now();
  const timeDiff = now - this.lastTime;
  const distance = this.lastY - this.startY;
  const velocity = distance / timeDiff;

  // 惯性滚动
  if (Math.abs(velocity) > 0.1) {
    this.decelerate(velocity);
  }
}

减速动画实现

实现减速动画函数，使用缓动公式使滚动逐渐停止。

decelerate(velocity) {
  const friction = 0.95;
  let speed = velocity * 10;
  const list = this.$refs.list;

  const animate = () => {
    if (Math.abs(speed) < 0.5) return;

    list.scrollTop -= speed;
    speed *= friction;

    requestAnimationFrame(animate);
  };

  requestAnimationFrame(animate);
}

边界处理

添加滚动边界检测，防止滚动超出列表范围。可以在touchmove和惯性滚动过程中进行检查。

checkBoundary() {
  const list = this.$refs.list;
  if (list.scrollTop <= 0) {
    list.scrollTop = 0;
    return true;
  }

  const maxScroll = list.scrollHeight - list.clientHeight;
  if (list.scrollTop >= maxScroll) {
    list.scrollTop = maxScroll;
    return true;
  }

  return false;
}

使用CSS优化性能

为滚动列表添加CSS属性优化渲染性能，避免重绘和回流。

.scroll-list {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  backface-visibility: hidden;
}

使用第三方库的替代方案

对于更复杂的需求，可以考虑使用专门的手势库如hammer.js或现成的滚动组件如better-scroll。

安装better-scroll：

npm install @better-scroll/core --save

在Vue中使用：

import BScroll from '@better-scroll/core'

mounted() {
  this.bs = new BScroll(this.$refs.wrapper, {
    scrollY: true,
    click: true,
    tap: true
  })
}