脚本宝典收集整理的这篇文章主要介绍了vue-music:歌词高亮滚动,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
需求:获取歌词后,按照UI设计,歌词高亮滚动,同时,当滚动到index=5的时候,不再向下滚动,直接高亮
<scroll class="middle-r"
ref="lyricList"
:data="currentLyric && currentLyric.lines">
<div class="lyric-wrapper">
<div v-if="currentLyric">
<p ref="lyricLine"
class="text"
:class="{'current': currentLineNum === index}"
v-for="(line, index) in currentLyric.lines"
:key="line.time">{{line.txt}}</p>
</div>
</div>
</scroll>
歌词的分析使用了js-lyric插件,从而生成我们需要的数据结构
//获取歌词的时候,实例化
getLyric() {
this.currentSong.getLyric().then((lyric) => {
//利用第三方库: js-lyric ,解析我们的歌词,生成方便操作的对象
this.currentLyric = new Lyric(lyric, this.handleLyric)
···
})
}
回调函数
handleLyric({lineNum, txt}) {
this.currentLineNum = lineNum
if (lineNum > 5) {
//v-for循环,所以this.$refs.lyricLine是一个数组,从而获取相应DOM
let lyricEl = this.$refs.lyricLine[lineNum - 5]
//调用scroll组件API
this.$refs.lyricList.scrollToElement(lyricEl, 1000)
} else {
//如果小于5,则滚动制顶部
this.$refs.lyricList.scrollTo(0, 0, 1000)
}
this.playingLyric = txt
},
以上是脚本宝典为你收集整理的vue-music:歌词高亮滚动全部内容,希望文章能够帮你解决vue-music:歌词高亮滚动所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。