小程序项目实战(十一)

一、改进一些功能

        返回后如果重新点击播放的歌曲是一样的,则不需要重新加载歌曲

进入播放页时对播放页面的一些数据进行清空处理,解决加载时残留上一首歌曲的数据

 

二、点击上一首和下一首切换歌曲

        在music-home页面中给song-item 添加点击事件,点击时将index,和歌曲列表保存到store中 

         同理在detai-song页面中给song-item-v2 添加点击事件,点击时将index,和歌曲列表保存到store中 

 

 在music-player页面给上一首和下一首按钮添加点击事件

         点击时调用store中的dispatch方法

 

         根据不同的播放模式获取下一首歌的索引,获取索引后再根据获取到的歌曲列表播放相对应的歌曲

 

 

         当歌曲播放完毕时可以调用onEnded方法播放下一首歌曲

 三、展示播放工具栏

 

 

 

         监听播放器

         一开始就根据id播放歌曲

         点击播放或暂停按钮时将播放状态传递给store