一、学习内容
模板
页面级(路由级)组件views/Player.vue
新建components/player文件夹存放播放页面的组件
|----PlayerHeader.vue:(复制修改之前的歌单详情页头部组件,修改图片,title等)
|----PlayerMiddle.vue:中间图片/歌词,可以切换,使用swiper
|----PlayerBottom.vue:底部进度条
|-----NormalPlayer.vue: 普通播放页面
在App.vue中导入--注册--使用(测试用)将这三个组件放入NormalPlayer中,NormalPlayer放入Player中,Playe放在App.vue中
NormalPlayer.vue
显示和隐藏
很多地方都会用到默认播放页面的显示和隐藏,全局变量Vuex
找到store/index.js,加入变量记录默认播放页面是否展示,默认关闭。
在播放页面使用全局变量
Player.vue中v-show使用全局变量控制显示/隐藏
在DetailBottom.vue中,为每首音乐加入点击事件,修改全局变量isFullScreen。显示播放页面
|