vue让歌词随着进度条动

html歌词部分

 <div v-show="!flage" id="jnc" ref="exhibition" >
  <div @click="dian" v-for="(item,index) in arr1" :key="index" :class="index == indexActive?'activee':''">{{ item.lyric }}</div>
  </div>

data里的数据

      lyicsList: [],
      arr1: [],
      indexActive: 0,

歌词处理

    format_lyrics(lyric) {
      this.arr = lyric.split('\n')
      this.arr.forEach(item => {
        // 歌词
        let new_lry = item.slice(item.indexOf(']') + 1)
        if (new_lry) {
          //时间
          let time = item.slice(item.indexOf('['), item.indexOf(']') + 1)
          // 处理时间
          let sec = parseInt(time.slice(time.indexOf(':') + 1, time.indexOf('.')))
          let min = parseInt(time.slice(time.indexOf('[') + 1, time.indexOf(':')))
          let timeAll = sec + min * 60
          let obj = {
            time: timeAll,
            lyric: new_lry
          }
          this.arr1.push(obj)
        }
      })

    },

监听watch里的数据

    value: {
      handler(newVal) {
        for (let a = 0; a < this.arr1.length; a++) {
          if (newVal < this.arr1[a].time) {
            this.indexActive = a - 1
            // console.log( this.indexActive)
            let mid = this.$refs.exhibition.offsetHeight / 2
            this.$refs.exhibition.scrollTop = this.$refs.exhibition.children[this.indexActive].offsetTop - mid
            break;
          }
        }
      }
    }