vuemusic:歌词高亮滚动

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

1.html部分

1. 歌词滚动：scroll组件
2. 高亮显示当前歌词：currentLineNum设置一个class

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


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
},