当前位置：首页 > VUE

vue歌词滚动实现

2026-03-28 07:23:40VUE

Vue 歌词滚动实现方法

使用 CSS 动画实现基础滚动

通过 CSS 的 transform 和 transition 属性实现平滑滚动效果。将歌词列表包裹在固定高度的容器中，通过动态修改 translateY 值控制滚动位置。

<template>
  <div class="lyrics-container">
    <div 
      class="lyrics-list" 
      :style="{ transform: `translateY(${-currentLine * lineHeight}px)` }"
    >
      <div 
        v-for="(line, index) in lyrics" 
        :key="index" 
        :class="{ active: index === currentLine }"
      >
        {{ line.text }}
      </div>
    </div>
  </div>
</template>

<style>
.lyrics-container {
  height: 300px;
  overflow: hidden;
}
.lyrics-list {
  transition: transform 0.3s ease;
}
.lyrics-list div.active {
  color: #ff0000;
  font-weight: bold;
}
</style>

基于音频时间戳同步

解析歌词文件（通常为 LRC 格式），将时间戳转换为秒数。通过监听音频播放时间，动态计算当前应高亮的歌词行。

vue歌词滚动实现

export default {
  data() {
    return {
      lyrics: [
        { time: 0.5, text: "第一句歌词" },
        { time: 5.2, text: "第二句歌词" }
      ],
      currentTime: 0
    }
  },
  computed: {
    currentLine() {
      for (let i = this.lyrics.length - 1; i >= 0; i--) {
        if (this.currentTime >= this.lyrics[i].time) {
          return i;
        }
      }
      return 0;
    }
  }
}

优化滚动性能

使用 requestAnimationFrame 实现平滑滚动，避免直接修改 DOM 导致的性能问题。通过节流控制滚动频率，保持 UI 流畅。

vue歌词滚动实现

methods: {
  scrollToCurrentLine() {
    if (!this.$refs.container) return;

    const container = this.$refs.container;
    const activeLine = container.querySelector('.active');
    if (!activeLine) return;

    const containerHeight = container.clientHeight;
    const lineTop = activeLine.offsetTop;
    const lineHeight = activeLine.clientHeight;

    const scrollTo = lineTop - (containerHeight - lineHeight) / 2;
    container.scrollTo({
      top: scrollTo,
      behavior: 'smooth'
    });
  }
}

处理长歌词列表

对于超长歌词列表，采用虚拟滚动技术（如 vue-virtual-scroller）只渲染可视区域内的歌词行，大幅提升性能。

<template>
  <RecycleScroller
    class="scroller"
    :items="lyrics"
    :item-size="50"
    key-field="id"
    v-slot="{ item, index }"
  >
    <div :class="{ active: index === currentLine }">
      {{ item.text }}
    </div>
  </RecycleScroller>
</template>

触摸设备支持

添加 touch 事件处理实现手动滚动歌词，并在释放时自动对齐到最近的时间点。

methods: {
  handleTouchStart(e) {
    this.isDragging = true;
    this.startY = e.touches[0].clientY;
  },
  handleTouchMove(e) {
    if (!this.isDragging) return;
    const deltaY = e.touches[0].clientY - this.startY;
    this.$refs.container.scrollTop -= deltaY;
    this.startY = e.touches[0].clientY;
  },
  handleTouchEnd() {
    this.isDragging = false;
    this.snapToNearestLine();
  }
}

实现完整的歌词滚动组件需要考虑音频同步、性能优化和跨设备兼容性。以上方法可根据实际需求组合使用，建议通过监听音频播放器的 timeupdate 事件来驱动歌词更新。