vue-music:歌詞高亮滾動

雲深不知處發表於2018-10-15
Vue

需求：獲取歌詞後，按照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
    },

相關文章