无法高亮显示最后一行歌词

Question

老师，我的代码没有爆红，能运行。就是无法高亮显示最后一行歌词，03：55唱完最后一行，可是03：55~04:15这个时间段最后一行歌词都一直不高亮显示，这是为什么呢?

// components/lyric/lyric.js
let lyricHeight = 0
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isLyricShow: {
      type: Boolean,
      value: false,
    },
    lyric: String,
  },

  observers: {
    lyric(lrc){
      console.log(lrc)
      this._parseLyric(lrc)
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    lrcList: [],
    nowLyricIndex: 0,   //当前选中的歌词的索引
    scrollTop: 0,       //滚动条滚动的高度
  },

  lifetimes: {
    ready(){
      //rpx与px的换算
      wx.getSystemInfo({
        success(res) {
          lyricHeight = res.screenWidth / 750 * 64   //求出1rpx的大小
        },
      })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    update(currentTime){
      let lrcList = this.data.lrcList
      if(lrcList.length == 0 ){
        return
      }
      if(currentTime > lrcList[lrcList.length - 1].time){   //高亮显示最后一行歌词
        if(this.data.nowLyricIndex != -1){
          this.setData({
            nowLyricIndex: -1,
            scrollTop: lrcList.length * lyricHeight
          })
        }
      }
      for(let i =0,len = lrcList.length; i < len; i++){
        if(currentTime <= lrcList[i].time){
          this.setData({
            nowLyricIndex: i - 1,
            scrollTop: (i - 1) * lyricHeight,
          })
          break
        }
      }
    },

    _parseLyric(sLyric){   //解析歌词
      let line = sLyric.split('\n')
      // console.log(line)
      let _lrcList = []
      line.forEach((elem) => {   //循环
        let time = elem.match(/\[(\d{2,}):(\d{2})(?:\.(\d{2,3}))?]/g)  //正则表达式
        if(time != null){
          let lrc = elem.split(time)[1]
          let timeReg = time[0].match(/(\d{2,}):(\d{2})(?:\.(\d{2,3}))?/)
          //把时间转化为秒
          let time2Seconds = parseInt(timeReg[1]) * 60 + parseInt(timeReg[2]) + parseInt(timeReg[3]) / 1000
          _lrcList.push({
            lrc,
            time: time2Seconds,
          })
        }
      })
      this.setData({
        lrcList: _lrcList
      })
    }
  }
})

Answer 1

qq_慕先生1026127 2022-02-21 10:51:07

如果你要最后一句一直高亮 就设置index就好了啊

      if(currentTime > lrcList[lrcList.length - 1].time){   //高亮显示最后一行歌词
        if(this.data.nowLyricIndex != -1){
          this.setData({
              //这里改为 lrcList.length - 1
            nowLyricIndex: lrcList.length - 1,
            scrollTop: lrcList.length * lyricHeight
          })
        }
      }

• 提问者 慕姐7077867 #1

  解决了！感谢！！

Answer 2

谢成 2022-01-24 21:42:47

这个应该看需求吧：

1、第一种，最后一句唱完了，最后一句不高亮，因为这个需求是只高亮正在唱的歌词

2、第二种，最后一句唱完了，但最后一句始终高亮，就算这句都完事了还是要高亮

• linda89757 #1

  老师，确实是，按你的代码正常播放就是不高亮最后一行？

• 谢成 回复 linda89757 #2

  课程中的做法是如果最后一句唱完了，时间过去了，就不高亮了。是上面的第一种。