效果

實現

熱門榜單和今日推薦實現公用組件

1.今日推薦組件Today_Recommend.vue

<h2>{{title}}</h2>寫成動態標題

2.接受參數url等

? props:{title:{type:String,default:"今日榜單"},url:{type:String,default:"/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6&offset=0"},type:{type:String,default:"1"}

3.修改網絡請求

?

mounted(){var url = this.HOST + this.url;this.$axios.get(url).then(res => {this.todayRecommend = res.data.song_list}).catch(error => {console.log(error);})

4.修改home.vue頁面

<template lang="html"><div class=""><TodayRecommend title="今日推薦" url="/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=6&offset=0"/><NewsMusic /><SwiperBanner/><MusicListNav /><keep-alive><router-view /></keep-alive><TodayRecommend title="熱門榜單" url="/v1/restserver/ting?method=baidu.ting.billboard.billList&type=24&size=6&offset=0"/></div> </template>

此部分代碼對應分階段代碼中階段五

分階段代碼下載位置：

https://download.csdn.net/download/badao_liumang_qizhi/10846557

總結

以上是生活随笔為你收集整理的Vue实现仿音乐播放器8-实现热门榜单效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。