vue实现歌词滚动

实现歌词滚动的基本思路

歌词滚动功能通常需要解析歌词文件（如LRC格式），根据当前播放时间高亮对应歌词行，并实现平滑滚动效果。Vue的响应式特性和动画过渡能力非常适合此类需求。

歌词数据结构处理

将歌词解析为数组对象，每行包含时间戳和文本内容：

lyrics: [
  { time: 0.5, text: "第一句歌词" },
  { time: 3.2, text: "第二句歌词" },
  // ...
]

当前歌词高亮逻辑

使用计算属性确定当前应高亮的歌词行：

currentLineIndex() {
  const currentTime = this.player.currentTime // 获取播放器当前时间
  return this.lyrics.findLastIndex(
    line => line.time <= currentTime
  )
}

滚动容器实现

创建固定高度的滚动容器，使用CSS控制溢出滚动：

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

平滑滚动动画

通过Vue的过渡或直接操作DOM实现滚动：

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

  container.scrollTo({
    top: activeLine.offsetTop - container.offsetHeight/2,
    behavior: 'smooth'
  })
}

性能优化建议

对于长歌词列表，可使用虚拟滚动技术减少DOM节点：

// 使用vue-virtual-scroller等库
<RecycleScroller
  :items="visibleLyrics"
  :item-size="50"
  key-field="time"
>
  <template v-slot="{ item }">
    <div :class="{ active: item.time === currentTime }">
      {{ item.text }}
    </div>
  </template>
</RecycleScroller>

完整组件示例

<template>
  <div class="lyrics-player">
    <div class="lyrics-container" ref="container">
      <div 
        v-for="(line, index) in lyrics"
        :key="index"
        :class="['lyric-line', { active: index === currentLineIndex }]"
      >
        {{ line.text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      lyrics: [], // 从LRC文件解析
      currentTime: 0
    }
  },
  computed: {
    currentLineIndex() {
      return this.lyrics.findLastIndex(
        line => line.time <= this.currentTime
      )
    }
  },
  watch: {
    currentLineIndex() {
      this.scrollToCurrentLine()
    }
  },
  methods: {
    scrollToCurrentLine() {
      const container = this.$refs.container
      const activeLines = container.getElementsByClassName('active')
      if (activeLines.length > 0) {
        activeLines[0].scrollIntoView({
          behavior: 'smooth',
          block: 'center'
        })
      }
    }
  }
}
</script>

<style>
.lyrics-container {
  height: 300px;
  overflow-y: auto;
}
.lyric-line {
  padding: 8px;
  transition: all 0.3s;
}
.lyric-line.active {
  color: #42b983;
  font-weight: bold;
}
</style>