小风车吱呀转

摘要： 排行榜详情页和之前的歌手详情页、歌单详情页布局类似，除了数据不同之外还多了排行榜排名的样式，整体上还是可以复用之前的组件。 初始化代码： <template> <transition name="slide"> <music-list></music-list> </transition> </te 阅读全文

摘要： 前面的推荐和歌手页面已经开发完了，接下来就是排行榜首页开发 排行榜首页的基础样式如下： <template> <div class="rank"> <div class="toplist"> <ul> <li class="item"> <div class="icon"> <img width=" 阅读全文

摘要： 歌单详情页基础开发 歌单详情页和歌曲列表页面是非常类似的，只是数据上的不同。以下是这个组件的基本结构：可以看到和我们的singer-detail一样都有transition动画以及使用了music-list组件,接下来就是想办法把music-list数据传进去。 <template> <transi 阅读全文

摘要： 播放器歌词数据抓取 在api文件夹下创建song.js 设置获取歌曲api import axios from 'axios'; export function getLyric(id) { return axios.get(`/api/lyric?id=${id}`); } 把这个方法封装到com 阅读全文

摘要： 播放模式一共有3种：列表播放，循环播放，随机播放。 这个播放模式对应到vuex的data里面是mode字段，在getters有这个state的映射，在player.vue中的mapGetters里添加mode，这样就可以通过this.mode访问当前的播放模式 ...mapGetters([ 'fu 阅读全文

摘要： 给迷你播放器实现一个圆形进度条。圆形进度条主要是在圆上有个渐变的圈，颜色高亮 圆形进度条dom结构： <template> <div class="progress-circle"> <svg width="32" height="32" viewBox="0 0 100 100" version= 阅读全文

摘要： 有了歌曲的当前播放时长和总时长可以算出进度条 组件进度条dom结构 <template> <div class="progress-bar" ref="progressBar"> <div class="bar-inner"> <div class="progress" ref="progress" 阅读全文

摘要： 播放器播放时间的dom结构: <div class="progress-wrapper"> <span class="time time-l"></span> <div class="progress-bar-wrapper"> </div> <span class="time time-r"></ 阅读全文

摘要： 给前进和后退图标分别添加点击事件 <div class="icon i-left"> <i @click="prev" class="iconfont icon-prev"></i> </div> <div class="icon i-right"> <i @click="next" class=" 阅读全文

摘要： 添加audio标签 通常有src属性 指向播放音乐地址 即currentSong.url <audio ref="audio" :src="currentSong.url" ></audio> 仅仅这样是不能播放的，还需要调用audio这个dom的play方法 最好的调用时机：currentSong 阅读全文