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

1.html部分

  1. 歌词滚动:scroll组件
  2. 高亮显示当前歌词:currentLineNum设置一个class
<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>

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

本文固定链接: http://www.js-code.com/vue-js/vue-js_26819.html