实现网易云项目中点击底下的歌曲播放头像，会显示歌单详情
1.新建playMusic组件
2.在playcontroller引入组件，注册及使用
3.默认歌单详情不显示
<playMusic v-show="show"></playMusic>
data() {
return {
paused: true,
show:false//歌单详情是否显示
}
},
4.控制歌单详情的显示(show取反)
<div class="left" @click="show=!show">
5.设置返回按钮
在playMusic.vue里面
<div class="playMusic">
<div class="back" >
<svg class="icon" aria-hidden="true" @click="$emit('myback')">
<use xlink:href="#icon-sdf"></use>
</svg>
</div>
playController.vue自定义触发事件取反
<!--使用歌单详情组件-->
<playMusic v-show="show" @myback="show=!show"></playMusic>
二.构建歌曲详情页面
1.playController.vue传参
<playMusicv :play="play" :paused="paused" :playDetail="playlist[playCurrentIndex]" v-show="show" @myback="show=!show"></playMusicv>
2.子组件接收
props:['playDetail','paused','play']//接收歌曲详情，歌曲暂停，play函数控制播放与暂停
3.大的背景图
<div class="bg" :style="{backgroundImage:`url(${playDetail.al.picUrl})`}"></div>
4.跑马灯效果
<marquee behavior="scroll" direction="left">{{playDetail.name}}</marquee>
5.播放时的唱片小白条设置
动态class绑定 ，当条件为true时添加class名称
:class="{active:!paused}"
active:true 音乐播放，active:false 音乐暂停
<div class="playContent">
<img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
<img class="disc" src="@/assets/img/disc-ip6.png" alt="">
<img class="playImg" :src="playDetail.al.picUrl" alt="">
</div>
data(){
return{
paused:true, //准备一个变量控制播放按钮的切换
show:false //歌单详情是否显示
}
},
?????唱片旋转
6.唱片和歌词的切换
默认一个显示，一个不显示
data() {
return {
isPlaycontent: true
}
<div class="playContent" v-if="isPlaycontent" @click="isPlaycontent=!isPlaycontent">
<img class="needle" :class="{active:!paused}" src="@/assets/img/needle-ip6.png" alt="">
<img class="disc" src="@/assets/img/disc-ip6.png" alt="">
<img class="playImg" :src="playDetail.al.picUrl" alt="">
</div>
<div class="playLyric" v-else @click="isPlaycontent=!isPlaycontent">
我是歌词模块内容
</div>
7.找到接口文档，获取当前音乐歌词展示到页面
api /index 获取歌词的封装接口 ,api /liric?id=33894312 id 当前歌曲的id
export function getLyric(id) {
return axios.get(`${baseUrl}/lyric?id=${id}`)
}
统一对外抛出
export default {
getBanner,
getMusic,
getPlaylistDetail,
getLyric
}
在store/index里面的state中准备一个当前播放歌曲的歌词
state: {
playlist: [//音乐播放列表，默认有一条播放歌曲
{
name: "追梦赤子心",
id: 355992,
al: {
id: 35139,
name: "追梦痴子心",
pic: 19061133579343590,
picUrl: "http://p3.music.126.net/XDncptlBJ4_LN3hLBx-8aw==/19061133579343591.jpg",
pic_str: "19061133579343591",
}
}
],
playCurrentIndex: 0, //当前播放的音乐在音乐列表中的下标
lyric: ""
},
mutations 中定义一个函数setLyric，用来修改歌词数据
mutations: {
setPlaylist(state, value) {
state.playlist = value;
},
setPlayIndex(state, value) {
state.playCurrentIndex = value;
},
setLyric(state, value) {
state.lyric = value;
}
},
actions 获取歌词详情的函数 content当前的store对象，payload传递参数
plyload.id当前播放歌曲的id
声明一个变量，用来接收 result是当前歌词的详情
actions: {
async resLyric(content,payload){
let result=await api.getLyric(payload.id);
console.log(result)
}//请求歌曲详情信息
}
dispath触发action的方法，修改异步数据
commit触发mutation中的方法，修改同步数据
在playController.vue里面
mounted() {//默认情况下，网页一加载就触发，view和model双向绑定之后，触发在store中的reqltric获取当前播放歌曲，歌词详情
this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
},
updated() {//播放音乐数据发生改变，重新获取当前播放歌曲的歌词
this.$store.dispatch('reqLyric', {id: this.playlist[this.playCurrentIndex].id});
},
修改歌词内容为当前歌词详情
content.commit('setLyric',result.data.lrc.lyric)
把store数据拿过来，放在页面上(在页面上显示歌词)
<div class="playLyric" v-else @click="isPlaycontent=!isPlaycontent">
<p>{{$store.state.lyric}}</p>
</div>
