共计 819 个字符，预计需要花费 3 分钟才能阅读完成。
1. 布局
最外层的半透明蒙层 playlist
内容（list-wrapper）四个部分：list-header listContent list-operate list-close
listContent 样式：max-height: 240px overflow:hidden
2. list-content 中 scroll 刷新
播放列表的显示是通过 v -show 来显示的，因此需要在 v -show=true 的时候 list-content 中 scroll 重新刷新
// 显示播放列表
show() {
this.showFlag = true
// 因为组件时 v -show 控制，即：display:none → display:block，所以这里显示的时候，list-content 列表重新刷新 scroll
setTimeout(() => {
this.$refs.listContent.refresh()
// 正在播放的歌曲滚动至列表顶部
this.scrollToCurrent(this.currentSong)
}, 20)
}
3. 切换歌曲
切换歌曲的时候，歌曲播放列表需要滚动到当前播放歌曲
获取当前播放歌曲
…mapGetters([
……
‘currentSong’,
……
]),
watch 观察当前歌曲
currentSong(newSong, oldSong) {
if (!this.showFlag || newSong.id === oldSong.id) {
} else {
this.scrollToCurrent(newSong)
}
}
滚动至顶部
scrollToCurrent(current) {
const index = this.sequenceList.findIndex((song) => {
return current.id === song.id
})
this.$refs.listContent.scrollToElement(this.$refs.listItem[index], 300)
},
