网易云音乐项目实现（二）

5.底部播放器效果的实现

（1）因为底部播放器是固定的，而是在每一个页面都会显示的，所以我们应该在components下新建一个playController.vue把他引入到app.vue中

 

（3）     底部播放器需要放歌曲，需要在store文件夹下的index.js里定义state对象，用到playlist数组获取到音乐的播放列表，然后再默认有一条播放歌曲

 

效果图：

（4）在PlayController.vue里设置基本样式，获取到播放歌曲的名字和图片

 

还有右边的矢量图标的暂停键、列表键

 

（5）在store下的index.js里用mutations方法定义setPlaylist函数，用来修改state的音乐播放列表的数据

 

（6）要再添加一个矢量图标，因为歌曲会播放和暂停，所以在methods方法里定义一个play函数，在矢量图标上添加一个click点击事件，点击播放与暂停按钮时触发这个函数，在play函数里面加上判断语句，何时点击何时播放和暂停

 

 

（7）要想实现底部播放器的功能还要在store文件夹下的index.js里再定义一个setPlayIndex函数，再在PlayList.vue里加上click点击事件，最后再出发

 

 

（8）在PlayList.vue里引入mapMutations，然后再methods方法里面写入，这样使用者再点击播放按钮之后就会触发这个方法，从而实现播放暂停歌曲的效果了

 

1. 点击播放歌曲的头像：（弹出歌曲的详情）

（1）     歌曲详情页面：在components添加PlayMusic.vue 组件，引入到PlayController组件中

 

（2）     在PlayMusic.vue组件的样式中添加固定定位，固定在当前整个页面，宽度和高度设置与主页面相同

 

z-index框架的优先级比我们swiper的优先级高，导致页面覆盖不全

解决方法：找到swiper的css样式，把里面的z-index的值给删去，重启之后就没有影响了

 

效果图：

 

（3）     设置歌单详情页面是否显示，在PlayController.vue里加入v-show

 

 

在点击了播放器左下角的头像之后触发@click函数，就会取反，歌单详情页面出现

 

在歌曲详情组件里添加myback函数，再次取反，就会消失

 

在PlayMusic.vue的左上角添加点击事件，触发myback函数

 

效果图：

 

在PlayController.vue里加上用于接收歌曲详情，歌曲暂停播放按钮显示的条件，play函数的内容，在子组件的props接收

 

 

（4）     在PlayMusic子组件里添加背景图片（使用网易云数据调用图片），以及左上角的返回中间的歌曲名，右上角的分享

 

效果图：

 

（5）     最下方出现6个矢量图标：循环播放、上一首、暂停、播放、下一首、列表

 

 

（6）     在播放和暂停按钮处加入v-if判断，还有click点击事件实现点击播放与暂停按钮

 

 

（7）在组件中中间添加唱片和曲杆，唱歌的时候曲杆下来，暂停的时候曲杆上去

 

 

（8）     歌词和唱片切换的实现：

写一个判断函数，isPlaycontent，点击click函数做到歌词与唱片来回切换

 

 

 

（9）     找到api文件夹下的index.js

获取到歌词的api

 

歌词详情需要ajax请求，所以在store文件夹下的index.js里引入api

 

在state对象里加上lyric:””  显示正在播放的歌曲

 

在mutations对象里添加一个函数setLysic，用来修改后期lyric的歌词数据

 

添加一个actions的函数

 

在actions里添加一个commit来实现修改内容为当前获取的歌词详情

 

在PlayController.vue里加mounted函数，并且调用函数

 

在PlayController.vue里加updated函数，view与model双向绑定成功之后，获取当前播放歌曲详情，然后触发store中的函数reqLyric，并且传输参数，当前播放歌曲的歌词

 

获取到歌词：

 

出现的效果：

2.实现上一首下一首切换功能：

（1）在svg标签里加上点击事件实现goplay函数，下一首是1上一首是-1

 

 

在写个methods对象添加goplay函数，输出一下刚才试的1或-1

 

（2）再添加一个computed对象，从store中接收状态数据 playlist播放歌曲列表与playCurrentIndex播放歌曲下标，并且引入mapState

 

 

（3）定义一个index，把切换之后的歌曲下标赋值给index，再添加个if判断语句，当歌曲为最后一首时，再点击下一首会跳转到第一首（下标为0），当歌曲为第一首时，点上一首会切换到最后一首