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)
},
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。