1. 布局最外层的半透明蒙层playlist内容(list-wrapper)四个部分:list-header listContent list-operate list-closelistContent样式:max-height: 240px overflow:hidden2. 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)},