vue-musicApp

基于vue2框架实现的一款音乐app

预览链接

https://tfeng-use.github.io/vue-music.github.io/#/recommend

• 注：由于推荐页面的歌单推荐与播放器页面中的歌词都是通过在本地开启一个服务器，再向qq服务器申请数据的方法，所以通过github pages生成的网页是无法显示这两个地方的；

歌单推荐部分效果展示

歌词效果部分

功能

1. 实现多个页面的滚动效果、轮播图；
2. 实现图片的懒加载；
3. 实现歌手按字母排序，以及与歌手导航之间的联动；
4. 通过搜索框，对输入的内容进行实时搜索，并进行节流处理；
5. 实现歌曲的播放功能，以及对应进度条的显示，包括mini播放器的圆形进度条；
6. 实现进度条点击拖动与歌曲播放事件的实时同步；
7. 实现歌词的实时显示；
8. 实现歌曲多种模式的切换：顺序播放、单曲循环、随机播放；
9. 实现歌曲的播放、暂停、上一曲、下一曲等功能切换；
10. 实现歌曲的收藏功能；
11. 实现最近播放、搜索历史的存储读取；
12. 实现播放列表的添加、删除功能；
13. 给页面之间的切换加上动画； ...

方法

1. 所有的数据都是通过jsonp，或者axios直接获取qq音乐服务端的数据；
2. 通过父路由与子路由的切换实现更复杂的效果；
3. 通过vuex实现各路由之间的数据共享；
4. 通过mixin实现各组件之间的方法共享；
5. 通过将喜欢的歌曲添加到本地，实现对歌曲收藏的控制； ...

用到的包及作用

1. betterScroll 实现滚动；
2. fastclick 解决移动端点击延迟300ms的问题；
3. lazy-load 实现懒加载
4. lyric-paeser 加载歌词
5. storage 实现本地存储 ...