歌曲详情页

效果图:

点击随意页面后变为

 

 

 

---

 

歌曲详情

1.新建components / playMusic.vue

2.联系playMusic.vue 与 playController.vue(引入,注册)

playController.vue---全局底部栏, 要定位在底部栏上面

在playController.vue 中引入配置playMusic.vue(template中引入)

 

解决轮播图不被覆盖问题 :

改z-index:

在node_modules中找到swiper/swiper.css

第30,39,210的z-index注销

 

底部控制页面

1.playController.vue触发头像show由false变true,页面从无到有

 

 

 

 

 

 

 

 

 

 2.playController.vue 设置myback

 

 

 

 3.playMusic中 点击返回图 后触发myback函数,使其取反

 

 

 

---

唱片图变化:

 

 

 

---

 

歌词与唱片的切换

1.设一个控制唱片与歌词的切换的变量值isPlaycontent

 

 

 

 

2.给唱片和歌词分别加上v-if , v-else, 点击取反

 

 

 

 

---

 

 

出现歌词

引入歌词接口

api/index,js 中

 

 

 

统一对外抛出

 

 

 

配置数据

在store / index.js的state中准备一个当前播放歌曲的歌词

//state中加入
lyric: ""  //当前播放歌曲的歌词

mutations 中定义一个函数setLyric，用来修改歌词数据

 

setLyric(state, value) {//定义setLyric函数,修改lyric歌词数据    state.lyric = value;}

 

 

 

playController.vue 中

 

 

 

export default中:

dispath触发action的方法，修改异步数据

commit触发mutation中的方法，修改同步数据

 

mounted() {//view与model双向绑定成功后,获取当前播放歌曲的歌词详细信息
    //再此触发store中的函数reqLyric,并传参数:当前播放歌曲的id
    //dispatch触发store中actions中定义的函数（修改state中异步数据）
    this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
},
updated()
    {//view或model数据改变时,即播放歌曲改变时,重新获取歌词
        this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
    }

playMusic.vue 中显示歌词:

把store数据拿过来，放在页面上(在页面上显示歌词)

<!--显示歌词内容-->
<div class="playLyric" v-else @click="isPlaycontent=!isPlaycontent" >
    <p>{{$store.state.lyric}}</p>
</div>

接收歌曲详情,歌曲暂停播放按钮显示的条件

 

export default {
    name: "playMusic",
    props: ['playDetail', 'aaa', 'play'],//接收歌曲详情,歌曲暂停播放按钮显示的条件,
    data() {
        return {
            isPlaycontent: true  //控制唱片与歌词的切换
        }
    }
}

 

上下首歌曲切换

1.playmusic.vue中

小图标上添加 @click="goplay(-1)"

<svg class="icon" aria-hidden="true" @click="goplay(-1)">
    <use xlink:href="#icon-sys-copy"></use>
</svg>
<svg class="icon" aria-hidden="true"  @click="goplay(1)">
    <use xlink:href="#icon-xys-copy"></use>
</svg>

2.在vuex中获取播放歌曲列表和下标数据

import {mapState} from 'vuex' 

3.从store中接收状态数据 playlist播放歌曲列表与playCurrentIndex播放歌曲下标

computed:{    ...mapState(['playlist','playCurrentIndex'])},

建一个goplay函数:

methods:{
    goplay(num){
        //console.log(num)
      let index=this.playCurrentIndex+num //切换之后播放歌曲下标
        //console.log(index)
        if(index<0){//下标小于0,第一首,则回到最后一首
            index=this.playlist.length-1
        }else if(index==this.playlist.length){
            index=0//下标大于最后一首,则回到第一首
        }

        this.$store.commit('setPlayIndex',index)
    }
}