java歌词高亮显示滚动_vue-music:歌词高亮滚动

需求：获取歌词后，按照UI设计，歌词高亮滚动，同时，当滚动到index=5的时候，不再向下滚动，直接高亮

1.html部分

歌词滚动：scroll组件

高亮显示当前歌词：currentLineNum设置一个class

ref="lyricList"

:data="currentLyric && currentLyric.lines">

class="text"

:class="{'current': currentLineNum === index}"

v-for="(line, index) in currentLyric.lines"

:key="line.time">{{line.txt}}

2. 功能

歌词的分析使用了js-lyric插件,从而生成我们需要的数据结构

//获取歌词的时候，实例化

getLyric() {

this.currentSong.getLyric().then((lyric) => {

//利用第三方库: js-lyric ，解析我们的歌词，生成方便操作的对象

this.currentLyric = new Lyric(lyric, this.handleLyric)

···

})

}

回调函数

实例化歌词的回调函数

当前歌词索引:lineNum 歌词内容：txt

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

},