无法高亮显示最后一行歌词
来源:4-15 歌词与播放时间联动
慕姐7077867
2022-01-17
老师,我的代码没有爆红,能运行。就是无法高亮显示最后一行歌词,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
})
}
}
})
写回答
2回答
-
qq_慕先生1026127
2022-02-21
如果你要最后一句一直高亮 就设置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 }) } }
012022-04-21 -
谢成
2022-01-24
这个应该看需求吧:
1、第一种,最后一句唱完了,最后一句不高亮,因为这个需求是只高亮正在唱的歌词
2、第二种,最后一句唱完了,但最后一句始终高亮,就算这句都完事了还是要高亮
022022-02-08
相似问题