Vue音乐--排行榜页面08_优化

大概步骤：

目标效果

---

八、优化

• 要点：
  • 给排行榜歌曲列表添加排名符号
  • 刷新的时候返回路由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