音乐app各部分笔记（二）

7-15播放器progress-circle圆形进度条组件实现

1.首先是引入三步 progress-circle 引入到player.vue中

然后就是 SVG技术

值得注意的事 svg 中 circle里面的 stroke-dasharray属性与 stroke-dashoffset 能控制可用来控制圆形进度条

7-16播放器模式切换功能实现（上）

改变播放样式状态的同时也要更改 vuex中的的播放状态

首先是计算属性中取

然后是方法中提交

通知 vuex 改变 vuex 中的状态

　一开始的播放状态是从 vuex中 state.js中取到的

后面更改状态 mode也要做相应的改变

关于变化按钮状态中三目运算的连续判断用法

7-17播放器模式切换功能实现（中）

　　在chrome中 vue的import 出来的方法断点监听不到

　　在上面的方法中

　　playMode只能通过打印才能看到谷歌浏览器监听不到我擦

　　然后 vuex 仓库中 sequenceList 跟 playlist 是在点击详细页的时候 action一次性提交的也就是说他们那时候的列表是一样的

　　后来在改变状态的时候源代码是将 sequenceList 取到然后打乱通过 shuffle 然后通过

　　SET_PLAYLIST 也将 playlist 打乱了也就是

　　sequenceList 这时候跟 playlist 保持一致了

　　这是经典随机打乱数组的方法

(复制我会放在base.js中)

　　隔天补一下有个地方没搞懂的代码我发现在vuex 状态管理器中 getter.js 单单改变其中一个 state.playlist 是不会触发 currentSong

　　我擦原来是这样的 .... 经典打乱数组的方法是不会被监听到数组的变动因为里面的对象跟属性都没变只是顺序变了所以只能用索引值才能进行当前歌曲的触发

7-18播放器模式切换功能实现（下）

　　监听能否播放以及歌曲播放结束后触发事件　　

　　经过测试用this.$refs.audio.currentTime = 0; 只是将时长弄到零还需

　　this.$refs.audio.play();进行再次播放

巴特西