首页完善
实现效果
首页
详情页
最新专辑和歌单详情差不多，可以封装成一个组件
详情页
头部功能
换肤换背景，前面写过可返回，back
头部
中间图片功能：
下拉图片变大上拉图片变模糊注意：高斯模糊效果十分消耗性能的，不推荐使用，非要使用，建议只设置一次
if (offsetY < 0) {
// 向上滚动,图片变淡
let opacity = Math.abs(offsetY) / defaultHeight;
this.$refs.top.changeMask(opacity);
// let scale = 1 + Math.abs(offsetY) / defaultHeight;
// this.$refs.top.$el.style.filter = `blur(${scale}px)`
} else {
// 向上滚动,图片变大
let scale = 1 + offsetY / defaultHeight;
this.$refs.top.$el.style.transform = `scale(${scale})`;
}
底部播放列表功能
播放列表
-
实现滚动效果使用自己编写的滚动组件 <ScrollView ref="scrollView"> <DetailBottom :tracks="tracks" /> </ScrollView>
-
点击某一首歌，跳转到播放界面，歌曲详情展示// 映射Actions ...mapActions(["setFullScreen", "setSongDetail"]) selectMusic(id) { // 修改vuex的数据,展示全局的播放器并且请求数据、渲染数据 this.setFullScreen(true); this.setSongDetail([id]); }
-
点击播放全部，跳转到播放界面，默认播放第一首selectAllMusic() { this.setFullScreen(true); let ids = this.tracks.map(item => item.id); this.setSongDetail([ids]); }
主播放界面
播放界面
使用插件：
vue-awesome-swiper
头部封装，点击向下箭头，能关闭主播放界面
头部
...mapActions(["setFullScreen", "setMiniPlayer"]),
hiddenNormalPlayer() {
this.setFullScreen(false);
this.setMiniPlayer(true);
}
中间，可左滑，切换成歌词界面
左边
右边
-
搭建vue-awesome-swiper结构（三层结构）<template> <swiper :options="swiperOption" class="PlayerMiddle"> <swiperSlide class="cd"> </swiperSlide> <swiperSlide class="lyric"> <ScrollView> <ul> </ul> </ScrollView> </swiperSlide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> import { Swiper, SwiperSlide } from "vue-awesome-swiper"; import "swiper/css/swiper.css"; -
vue-awesome-swiper配置data() { return { swiperOption: { // 分页器 pagination: { el: ".swiper-pagination", bulletClass: "my-bullet", // 自定义默认类名 bulletActiveClass: "my-bullet-active" // 自定义默认类名 }, // 异步加载 observer: true, observeParents: true, observeSlideChildren: true } }; } 踩坑：前面已经使用过vue-awesome-swiper默认激活的类名，这里要自定义类名
并且style不能加 scoped 属性，建议新建一个style标签
设置播放键切换（watch，vuex）
底部
-
进度条设置<div class="bottom-progress"> <span>00:00</span> <div class="progress-bar"> <div class="progress-line"> <div class="progress-dot"></div> </div> </div> <span>00:00</span> </div> -
点击图标切换// vuex设置全局的播放状态 import { mapGetters, mapActions } from "vuex"; methods: { ...mapActions(["setIsPlaying", "setModeType"]), play() { // 播放暂停切换 this.setIsPlaying(!this.isPlaying); }, mode() { // 循环模式的切换 if (this.modeType === modeType.loop) { this.setModeType(modeType.one); } else if (this.modeType === modeType.one) { this.setModeType(modeType.random); } else if (this.modeType === modeType.random) { this.setModeType(modeType.loop); } } }, computed: { ...mapGetters(["isPlaying", "modeType"]) } /**************************改变图标*****************************/ // 通过类名 watch: { isPlaying(newValue, oldValue) { if (newValue) { this.$refs.play.classList.add("active"); } else { this.$refs.play.classList.remove("active"); } }, modeType(newValue, oldValue) { if (newValue === modeType.loop) { this.$refs.mode.classList.remove("random") this.$refs.mode.classList.add("loop") } else if (newValue === modeType.one) { this.$refs.mode.classList.remove("loop") this.$refs.mode.classList.add("one") } else if (newValue === modeType.random) { this.$refs.mode.classList.remove("one") this.$refs.mode.classList.add("random") } } }
列表播放器
使用插件：
velocity-animate使用Vue动画
播放列表
-
播放模式和主要播放器同步
前面一样的功能： 通过watch观察模式/播放的状态,在同步到vuex中
-
velocity-animate的使用// 导入 import Velocity from "velocity-animate"; import "velocity-animate/velocity.ui"; // 使用 /** * el:元素 Dom, * 第二个参数: 动画名称 String * 第三个参数: 动画配置 * 第四个参数: 回调函数 */ Velocity(el, "transition.perspectiveUpIn", { duration: 500 }, function() {}); -
velocity-animate配合Vue自定义动画使用<transition :css="false" @enter="enter" @leave="leave"> 内容 </transition>methods: { // 进入动画 // done 调用该函数，告诉vue,该动画执行完毕 enter(el, done) { Velocity(el, "transition.perspectiveUpIn", { duration: 500 }, function() { done(); }); }, leave(el, done) { Velocity( el, "transition.perspectiveUpOut", { duration: 500 }, function() { done(); } ); }, } -
踩坑：歌曲列表不能滚动
原因：一开始就初始化,但是数据后面过来，导致高度不正确
解决：IScroll中的refresh()刷新高度
// ScrollView 组件 methods: { // 重新获取高度 refresh() { // 停留100ms刷新 setTimeout(() => { this.iscroll.refresh(); }, 100); } },// 列表播放组件,每次数据变化，刷新高度 watch: { isShowListPlayer(newValue, oldValue) { if (newValue) { // 刷新高度 this.$refs.ScrollView.refresh(); } } } -
删除所有歌曲后，退出该列表播放器、主播放器、底部播放器
// 通过设置vue的state属性,来清空列表 delAll() { this.setDelSong(); } // 播放列表删除歌曲 [SET_DEL_SONG](state, index) { if (index !== undefined) { state.songs.splice(index, 1) } else { // 清空 state.songs = [] } if (state.songs.length === 0) { state.isFullScreen = false, state.isShowMiniPlayer = false, state.isShowListPlayer = false } } -
有坑：删除所有歌曲后，页面报错
原因：每次列表歌曲变化，去设置当前播放歌曲的详情，删除完后，没有歌曲去获取详情
解决：修改监听歌曲变化的函数
// 主播放界面 // 只要歌曲一变化，就切换歌词 watch: { currentSong(newValue, oldValue) { if (newValue.id === undefined) { // 没有歌曲时，不操作 return; } // 切换歌词 this.setSongLyric(newValue.id); } }
END
