大概步骤:
目标效果
八、优化
- 要点:
- 给排行榜歌曲列表添加排名符号
- 刷新的时候返回路由rank
- 详情页面头部图片换成第一首歌曲的图片(排行榜图片有字不适用)
- 收费歌曲,无法播放,获取不到url,弹出弹窗
- 排行榜歌曲列表的数据有点庞大,做成分段获取,往下拉再获取剩下的数据
(1)歌曲列表添加排名符号
- 因为是公共组件,所以,以父子组件传入标记为是否show
- 在公共组件中加入相关dom
# SongList.vue
<!--排名图标,动态显示-->
<div class="songlist-rank" v-show="rank">
<span :class="_getRankCls(index)">{{_getRankText(index)}}</span>
</div>
动态根据当前序列添加css样式和文字内容
# SongList.vue
/******动态样式,排名前三名图标******/
//添加class给span样式,即添加图片或者文字样式
_getRankCls(index){
if(index<=2){
return `songlist-rank_icon songlist-rank_icon${index}` //前三名添加的class是图片样式
}else{
return 'songlist-rank_text' //后面的样式是文字样式
}
},
//添加文字的方法
_getRankText(index){
if(index>2){
return index+1 //前三名之后的会有当前名次的文字
}
}
.songlist-rank_icon{
display: inline-block;
width: 25px;
height: 24px;
margin:auto 0;
background-size: 25px 24px;
}
.songlist-rank_icon0{
background-image: url(../../../assets/styles/logo/first@3x.png);
}
.songlist-rank_icon1{
background-image: url(../../../assets/styles/logo/second@3x.png);
}
.songlist-rank_icon2{
background-image: url(../../../assets/styles/logo/third@3x.png);
}
.songlist-rank_text{
margin:auto 0;
font-size: 16px;
color: #31c27c;
}
-
最后是这个排名序列是否要展示,取决于使用这个公共组件的那方
-
因此加入一个props,设置默认值为false不展示,要show就传入这个prop来
-
需要注意的是本地图片的路径要用相对路径写,(待找到更好的引用本地图片路径的方法)
-
这种根据图片序列,动态添加图片的方法,要记住
(2)刷新页面,返回路径
- 比较常用的小技巧
- 在获取数据的时候,刷新是不会传入数据的,即判断有无传入数据
- 无数据就 $ router.back() 或者 $ router.push({path:’…/…/’})
# rankDetail.vue
_getRankList(){
//判断是否有传入的数据,没有就返回路由
if(!this.topList.id){
this.$router.back()
return
}
//获取数据方法
getRankList(this.topList.id).then((res)=>{
if(res.code === ERR_OK){
this.songs = this._normalizeSongs(res.songlist)
}
})
},
(3)图片更换成第一首歌的图片
- 有歌曲数据,定义计算属性传入就可以了
- 先判断歌曲数据获取到了,否则会是空
# RankDetail.vue
bgimg(){
if(this.songs.length){
return this.songs[0].image
}
},
(4)收费歌曲,无法播放,获取不到url,弹出弹窗
- 待优化
(5)排行榜歌曲列表的数据有点庞大,做成分段获取,往下拉再获取剩下的数据
- 待优化
项目来源:慕课网
如有建议和疑问可联系
QQ:1017386624
邮箱:1017386624@qq.com