当前位置：首页 > VUE

vue歌词滚动实现

2026-03-07 21:13:46VUE

Vue 歌词滚动实现方法

基础实现思路

使用 Vue 的响应式数据和 CSS 动画实现歌词滚动效果。核心是通过计算当前播放时间匹配歌词时间点，动态调整滚动位置。

// 歌词数据格式示例
lyrics: [
  { time: 0.5, text: "第一句歌词" },
  { time: 5.2, text: "第二句歌词" }
]

动态样式绑定

通过 :class 绑定当前高亮歌词行，使用 transform 实现滚动效果：

<template>
  <div class="lyrics-container">
    <div 
      v-for="(line, index) in lyrics" 
      :key="index"
      :class="{ 'active': currentLine === index }"
    >
      {{ line.text }}
    </div>
  </div>
</template>

时间监听逻辑

在播放器时间更新时触发歌词匹配：

watch: {
  currentTime(newTime) {
    this.lyrics.forEach((line, index) => {
      if (newTime >= line.time && 
          (index === this.lyrics.length - 1 || newTime < this.lyrics[index + 1].time)) {
        this.currentLine = index
        this.scrollToLyric(index)
      }
    })
  }
}

平滑滚动实现

使用 CSS transition 实现平滑滚动效果：

.lyrics-container {
  transition: transform 0.3s ease;
}
.active {
  color: #ff0000;
  font-weight: bold;
}

性能优化方案

对于长歌词列表，建议使用虚拟滚动技术：

import { VirtualList } from 'vue-virtual-scroll-list'

export default {
  components: { VirtualList },
  computed: {
    visibleLyrics() {
      // 返回当前可视区域的歌词子集
    }
  }
}

完整组件示例

创建一个可复用的歌词组件：

vue歌词滚动实现

<template>
  <div class="lyrics-box" ref="container">
    <div 
      class="lyric-line"
      v-for="(line, index) in lyrics"
      :key="index"
      :ref="`line-${index}`"
      :class="{ active: currentLine === index }"
    >
      {{ line.text }}
    </div>
  </div>
</template>

<script>
export default {
  props: ['lyrics', 'currentTime'],
  data() {
    return {
      currentLine: 0
    }
  },
  methods: {
    scrollToLyric(index) {
      const container = this.$refs.container
      const lineEl = this.$refs[`line-${index}`][0]
      container.scrollTop = lineEl.offsetTop - container.offsetHeight / 2
    }
  }
}
</script>