Vue实现仿音乐播放器8-实现热门榜单效果

落日映苍穹つ 2023-10-18 12:31 2阅读 0赞

## 效果 ##

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

## 实现 ##

热门榜单和今日推荐实现公用组件

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页面

此部分代码对应分阶段代码中阶段五

分阶段代码下载位置：

[https://download.csdn.net/download/badao\_liumang\_qizhi/10846557][https_download.csdn.net_download_badao_liumang_qizhi_10846557]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/201812122226012.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_badao_liumang_qizhi_10846557]: https://download.csdn.net/download/badao_liumang_qizhi/10846557