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

效果

实现

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

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>

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