技术栈: Vue | Vuex | Vue-Router
- 首页: 🎠 轮播图 / 🎼 歌单推荐 / ⬇️ 底部播放组件
- 歌单详情: 📜 虚拟滚动 /
▶️ 点击播放 - 搜索页面::rocket: 懒加载分批次加载 / :mag: 历史记录存储与去重
- 歌曲详情::cd: 磁盘与磁针动画 / :musical_note: 歌词样式随歌曲播放变化
- 底部播放组件::file_cabinet: Vuex 存储歌单数据与播放下标实现全局状态管理
- 登录页面::key: Vue-Router路由守卫鉴权 / :camera: 二维码扫码登录
- 切歌时
index
的范围合法性判断 - 首页音乐播放与导航栏的定位
- 关于【随机播放】功能的实现
- 考虑在 vuex 中保存
isRand
标识启用了随机播放模式- 难点在于随机播放下播放历史的记录,考虑使用在 vuex 中使用栈来记录,随机模式下上一首出栈,下一首入栈。
- 关于【播放列表】页面的实现
- 封装全局 Toast 消息提示组件
- 个人中心页面数据获取与渲染
- Transition 标签实现路由切换的过渡效果