vue歌词滚动实现
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 格式），将时间戳转换为秒数。通过监听音频播放时间，动态计算当前应高亮的歌词行。
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 流畅。
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 事件来驱动歌词更新。
