给当前播放的歌曲添加一个class
<i class="current" :class="getActivatyCls(item)"></i>
getActivatyCls (item) {
if (this.currentSong.id === item.id) { // 当前播放是选中的歌曲
return 'icon-play' // 显示这个class
}
},
在列表中添加点击事件:
<li class="item" v-for="(item, index) of sequenceList" :key="item.id" @click="selectItem(item, index)">
selectItem (item, index) {
if (this.mode === playMode.random) {
// 如果当前模式是随机播放
index = this.playList.findIndex((song) => {
return song.id === item.id
// 就找到当前点击的歌曲所对应的item索引
})
}
this.setCurrentIndex(index) // actions方法
this.playing(true)
},
scrollToCurrent的实现:
scrollToCurrent (current) {
const index = this.sequenceList.findIndex((song) => {
return current.id === song.id
// 找到current在song里面的位置
})
this.$refs.listContent.scrollToElement(this.$refs.listItem[index], 300)
},
然后监控currentSong的变换,如果发生变化,就调用scrollToCurrent的方法:
watch: {
currentSong (newSong, oldSong) {
if (!this.showFlag || newSong === oldSong) {
return
}
this.scrollToCurrent(newSong)
}
},
同时在show的时候,也要调用这个方法:
show () {
this.showFlag = true
setTimeout(() => {
this.$refs.listContent.refresh()
this.scrollToCurrent(this.currentSong)
})
},