04 2021 档案

VUE移动端音乐APP学习【十五】：播放器模式切换功能实现
摘要：播放模式一共有3种：列表播放，循环播放，随机播放。 这个播放模式对应到vuex的data里面是mode字段，在getters有这个state的映射，在player.vue中的mapGetters里添加mode，这样就可以通过this.mode访问当前的播放模式 ...mapGetters([ 'fu 阅读全文
posted @ 2021-04-27 13:52 小风车吱呀转 阅读(791) 评论(0) 推荐(0)
VUE移动端音乐APP学习【十四】：播放器progress-circle 圆形进度条组件实现
摘要：给迷你播放器实现一个圆形进度条。圆形进度条主要是在圆上有个渐变的圈，颜色高亮 圆形进度条dom结构： <template> <div class="progress-circle"> <svg width="32" height="32" viewBox="0 0 100 100" version= 阅读全文
posted @ 2021-04-25 21:34 小风车吱呀转 阅读(339) 评论(0) 推荐(0)
VUE移动端音乐APP学习【十三】：播放器progress-bar进度条组件
摘要：有了歌曲的当前播放时长和总时长可以算出进度条 组件进度条dom结构 <template> <div class="progress-bar" ref="progressBar"> <div class="bar-inner"> <div class="progress" ref="progress" 阅读全文
posted @ 2021-04-25 15:13 小风车吱呀转 阅读(647) 评论(0) 推荐(0)
VUE移动端音乐APP学习【十二】：播放器播放时间获取和更新
摘要：播放器播放时间的dom结构: <div class="progress-wrapper"> <span class="time time-l"></span> <div class="progress-bar-wrapper"> </div> <span class="time time-r"></ 阅读全文
posted @ 2021-04-23 20:38 小风车吱呀转 阅读(482) 评论(0) 推荐(0)
VUE移动端音乐APP学习【十一】：播放歌曲前进后退功能实现
摘要：给前进和后退图标分别添加点击事件 <div class="icon i-left"> <i @click="prev" class="iconfont icon-prev"></i> </div> <div class="icon i-right"> <i @click="next" class=" 阅读全文
posted @ 2021-04-22 22:19 小风车吱呀转 阅读(259) 评论(0) 推荐(0)
VUE移动端音乐APP学习【十】：播放器歌曲播放功能实现
摘要：添加audio标签 通常有src属性 指向播放音乐地址 即currentSong.url <audio ref="audio" :src="currentSong.url" ></audio> 仅仅这样是不能播放的，还需要调用audio这个dom的play方法 最好的调用时机：currentSong 阅读全文
posted @ 2021-04-20 15:09 小风车吱呀转 阅读(432) 评论(0) 推荐(0)
VUE移动端音乐APP学习【九】：播放器基础样式及展开收起
摘要：播放器基础样式 player.vue <template> <div class="player" v-show="playlist.length>0"> <div class="normal-player" v-show="fullScreen"> <div class="background"> 阅读全文
posted @ 2021-04-08 23:27 小风车吱呀转 阅读(278) 评论(0) 推荐(0)
VUE移动端音乐APP学习【八】：播放器vuex的相关应用
摘要：在components目录下创建player=>player.vue组件 <template> <div class="player"> <div class="normal-player"> 播放器 </div> <div class="mini-player"></div> </div> </t 阅读全文
posted @ 2021-04-06 14:57 小风车吱呀转 阅读(140) 评论(0) 推荐(0)
VUE移动端音乐APP学习【七】：播放器vuex数据设计
摘要：播放器可以通过歌手详情列表，歌单的详情列表，排行榜甚至是搜索结果去打开，即多个组件都可以操作这个播放器，当这个播放器一旦打开以后，缩小播放器，它仍然可以在后台播放运行。所以控制播放器的数据一定是全局的，那么就需要通过vuex来管理这些数据。 在state.js里 vuex需要管理以下数据： 播放器的 阅读全文
posted @ 2021-04-05 19:53 小风车吱呀转 阅读(347) 评论(0) 推荐(0)
VUE移动端音乐APP学习【六】：歌手详情页面开发
摘要：子路由配置 创建singer-detail.vue组件 <template> <div class="singer-detail"></div> </template> <script> export default { name: 'singer-detail', }; </script> <st 阅读全文
posted @ 2021-04-04 22:25 小风车吱呀转 阅读(380) 评论(0) 推荐(0)