vue_music：播放列表playlist.vue

2019年9月15日 194次阅读 来源: 云深不知处

1. 布局

  • 最外层的半透明蒙层playlist
  • 内容（list-wrapper）四个部分：list-header listContent list-operate list-close
  • listContent样式：max-height: 240px overflow:hidden

《vue_music：播放列表playlist.vue》

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)
},
    原文作者：云深不知处
    原文地址: https://segmentfault.com/a/1190000017368469
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞