在上一节播放控件（音乐app项目-第9步）的基础上，希望播放控件能够在所有页面显示，效果如下：

流程：

1.修改index.html

加上如下代码，防止postion:fixed失效：

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

2.增加store>index.js，用于存储全局变量播放列表playlist和当前播放歌曲的索playCurrentIndex：

index.js:

import { createStore } from 'vuex'export default createStore({state: {playlist:[{al:{},}],playCurrentIndex:0,},getters: {},mutations: {// 用来修改state中的playlistsetPlaylist:function (state,value) {state.playlist = value},setPlayIndex:function (state,index) {state.playCurrentIndex = index}},actions: {},modules: {}
})

3.修改播放组件playController.vue：

<template><div class="playController"><div class="left"><img class="songPhoto" :src="playlist[playCurrentIndex].al.picUrl"><div class="singName">{{playlist[playCurrentIndex].name}}</div><div class="tips">橫划可以且换上下首</div></div><div class="right"><svg class="icon bofang" aria-hidden="true"><use xlink:href="#icon-bofangsanjiaoxing"></use></svg><svg class="icon liebiao" aria-hidden="true"><use xlink:href="#icon-liebiaomoshi"></use></svg></div></div>
</template><script>import {mapState,mapMutations} from 'vuex'export default {name: "playController",computed:{...mapState(['playlist','playCurrentIndex'])},// props:[//     'playIndex',//     'playlist',// ],mounted() {// console.log(this.playCurrentIndex)}}
</script><style scoped>.playController{position: fixed;width: 7.5rem;height: 1rem;background-color: cadetblue;border-radius: 0 0.5rem 0.5rem 0;bottom: 0.3rem;left: 0;}.right{display: flex;}.right>.icon{width: 0.6rem;height: 0.6rem;fill: #cccccc;}.bofang{position: absolute;right: 1.1rem;top: 0.2rem;}.liebiao{position: absolute;right: 0.25rem;top: 0.2rem;}.songPhoto{position: absolute;top: -0.2rem;left: 0;width: 1.4rem;height: 1.4rem;z-index: 99;border-radius: 0.7rem;}.singName{position: absolute;left: 1.5rem;font-size: 18px;color: whitesmoke;width: 4rem;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;}.tips{position: absolute;bottom: 0.1rem;color: #cccccc;left: 1.5rem;font-size: 12px;}
</style>

4.修改playList组件：

<template><div class="playlist" ><div class="playlist-top"><div class="left"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-bofang1"></use></svg><div class="text"><div class="title">播放全部</div><div class="num">(共{{playlist.tracks.length}}首)</div></div></div><div class="btn">+ 收藏（{{changeValue(playlist.subscribedCount)}}）</div></div><div class="list"><div class="playItem" v-for="(item,i) in playlist.tracks" :key="i" @click="changeSong(i)"><div class="left"><div class="index">{{i+1}}</div><div class="content"><div class="title">{{item.name}}</div><div class="author"><div class="tag" v-for="(tag,index1) in playlist.tags" :key="index1">{{tag}}</div><div class="singers" style="font-size: 0.24rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;width: 160px; color: #cccccc">{{item.ar[0].name}}-{{item.al.name}}</div></div></div></div><div class="right"><svg class="icon bofang" aria-hidden="true"><use xlink:href="#icon-bofang1"></use></svg><svg class="icon liebiao" aria-hidden="true"><use xlink:href="#icon-gengduo-shuxiang"></use></svg></div></div></div></div></template><script>export default {name: "playList",data:function(){return {playIndex:0,playlist:{creator:{},tracks:[],},}},props:['playlist'],components:{},methods:{changeValue:function (num) {let res = 0;if (num>=100000000){res = num/100000000;res = res.toFixed(2) + '亿'}else if (num>10000){res = num/10000;res = res.toFixed(2) + 'w'}else if (num>1000){res = num/1000;res = res.toFixed(2) + 'k'}else res = num;return res},changeSong:function (index) {this.$store.commit('setPlayIndex',index)},},}
</script><style lang="less" scoped>*{margin: 0;padding: 0;}.playlist{width: 7.5rem;padding: 0 0.4rem;background-color: white;margin-top: 0.4rem;border-radius: 0.4rem 0.4rem 0 0;padding-bottom: 0.6rem;}.playlist>.playlist-top{display: flex;justify-content: space-between;height: 1rem;align-items: center;}.playlist>.playlist-top>.left{display: flex;align-items: center;}.playlist>.playlist-top>.btn{font-size: 0.3rem;color: white;background-color: orangered;height: 0.6rem;padding: 0.1rem;display: flex;align-items: center;border-radius: 0.4rem;}.playlist>.playlist-top>.left>.icon{width: 0.4rem;height: 0.4rem;margin-right: 0.2rem;}.playlist>.playlist-top>.left>.text>.title{font-size: 0.34rem;font-weight: 900;display: inline-block;}.playlist>.playlist-top>.left>.text>.num{font-size: 0.24rem;color: #666;display: inline-block;margin-left: 0.1rem;}.playlist>.playlist-top>.text{display: block;white-space: nowrap;align-items: center;}.playItem{position: relative;margin: 0.4rem 0;.right{position: absolute;top: 0;right: 0;width: 1rem;height: 1rem;.liebiao{position: absolute;top: 0.15rem;width: 0.5rem;height: 0.5rem;right: -0.1rem;fill: #cccccc;}.bofang{position: absolute;top: 0.2rem;width: 0.5rem;height: 0.5rem;right: 0.7rem;fill: #cccccc;}}.left{display: flex;.index{position: absolute;line-height: 1rem;color: #cccccc;font-size: 0.3rem;}.content{margin-left: 0.5rem;.title{font-size: 0.33rem;font-weight: 900;color: #333333;margin: 0.15rem 0;width: 5rem;}}}.left>.content>.author{display: flex;.tag{width: 30px;height: 15px;font-size: 0.01rem;color: orangered;border-radius: 0.1rem;border: 1px solid red;margin-right: 0.05rem;text-align: center;background-color: rgba(255,153,38,0.3);}}}</style>

5.修改ListView.vue组件，将api数据传给存储着全局变量的index.js

<template><div class="listView"><listView-top :playlist="playlist"></listView-top><play-list :playlist="playlist"></play-list></div>
</template><script>import listViewTop from "../components/listViewTop.vue";import {getMusicList, getPlaylistDetail} from "../api";import playList from "../components/playList.vue";import {useRoute} from 'vue-router';export default {name: "ListView",data:function(){return{list:[],playlist:{creator:{},tracks:[],},}},async mounted() {const route = useRoute();let id = route.query.id;let result = await getPlaylistDetail(id);this.playlist = result.data.playlist;this.$store.commit('setPlaylist',this.playlist.tracks); //将音乐列表提交到store的index.js中的setPlaylist方法，this.playlist.tracks为该方法中的value参数console.log(this.playlist.tracks)},components:{listViewTop,playList,},}
</script><style scoped></style>

6.将播放组件playController.vue引入App.vue：

<template><router-view></router-view><playController></playController>
</template><script>import playController from "./components/playController.vue";export default {components:{playController,},}</script><style lang="less">*{margin: 0;padding: 0;box-sizing: border-box;font-family: '微软雅黑';}a{color: #333333;text-decoration: none;  /*没有下划线*/}</style>

音乐app项目下一节：

实现音乐播放（音乐app项目-第11步）_Zhichao_97的博客-CSDN博客

全局播放控件（音乐app项目-第10步）相关推荐

实现音乐播放（音乐app项目-第11步）
在上一节(全局播放控件 (音乐app项目-第10步))基础上,继续实现音乐播放的效果如下: 音乐播放器流程: 1.修改全局变量(index.js): import { createStore } f ...
歌单详情内容-播放列表（音乐app项目-第8步）
在上一节歌单详情内容-图标列表 (音乐app项目第7步)的基础上,继续实现歌单详情内容-播放列表,效果如下图标注区域所示: 流程: 1.新建组件playList.vue playList.vue: & ...
歌单详情内容-图标列表（音乐app项目-第7步）
在上一节歌单详情内容-顶部 (音乐app项目-第6步)_Zhichao_97的博客-CSDN博客的基础上,继续实现详情页的图标列表,效果如下图标注区域所示: 流程: 1.在iconfont官网添加所需 ...
头部导航（音乐app项目-第1步）
实现下图标注区域: 流程: 1.新建子组件topNav.vue topNav.vue: 如果不理解代码中svg引入图标部分的代码,可以参考(iconfont 阿里巴巴矢量图标库在线引入图标_Zhic ...
Vue+Vuex+Element-ui实现歌曲播放控件、播放列表功能
写在前面: 根据思路写代码和写文章的区别还是挺大的,后者更多需要的是一个总结表述的能力,以及需要判断文章中呈现的东西是否有价值.做笔记和写博客同样是在记录,而博客还承担了一个供别人浏览的职能,所以如何 ...
html5--移动端视频video的android兼容，去除播放控件、全屏等
android下html5的视频播放一直是前端兼容的重灾区,各种体验差,被诟病已久.但之前的故宫穿越H5,和吴亦凡入伍H5,利用的视频技术,貌似又给人一种新面貌. 前段时间做某项目,恰好也是一个类似视 ...
uniapp 判断页面是否是横竖屏,解决微信小程序video组件全屏播放视频遮盖自定义播放控件问题
如果res.deviceOrientation 等于landscape 的话是竖屏,portrait则是横屏.因为用户每旋转一次屏幕就会触发里面的onShow钩子,因此在页面显示或横竖屏变化都会触发这 ...
uniapp中使用lodop打印控件实现app广域、局域网打印功能，亲测可用
文章目录前言一.本文目的二.使用步骤 1.准备工作 2.引入库文件 3.页面使用总结前言在项目中使用了lodop控件,然而蛋疼的发现这玩意uniapp app端不能直接使用,在vip售后群 ...
netflix什么来很_如何使用Netflix的屏幕锁定来禁用播放控件
netflix什么来很 Photo Hall/Shutterstock 照相馆/快门 Are you tired of watching Netflix on your phone and accid ...

全局播放控件（音乐app项目-第10步）

在上一节播放控件（音乐app项目-第9步）的基础上，希望播放控件能够在所有页面显示，效果如下：

流程：

音乐app项目下一节：

实现音乐播放（音乐app项目-第11步）_Zhichao_97的博客-CSDN博客

全局播放控件（音乐app项目-第10步）相关推荐

最新文章

热门文章

全局播放控件 （音乐app项目-第10步）

在上一节播放控件 （音乐app项目-第9步）的基础上，希望播放控件能够在所有页面显示，效果如下：

流程：

音乐app项目 下一节：

实现音乐播放 （音乐app项目-第11步）_Zhichao_97的博客-CSDN博客

全局播放控件 （音乐app项目-第10步）相关推荐

最新文章

热门文章

全局播放控件（音乐app项目-第10步）

在上一节播放控件（音乐app项目-第9步）的基础上，希望播放控件能够在所有页面显示，效果如下：

音乐app项目下一节：

实现音乐播放（音乐app项目-第11步）_Zhichao_97的博客-CSDN博客

全局播放控件（音乐app项目-第10步）相关推荐