9.发现歌单数据获取

先把歌单组件写好，再尝试获取数据，为数据显示做准备。

1.在home文件夹下新建一个MusicList.vue文件

2.写好组件

3.在HomeView.vue中引入

  // 1.
import MusicList from "@/components/home/MusicList.vue"  // 2.
export default {
  name: 'HomeView',
  components: { 
    TopNav, // 注册
    TopSwiper,
    IconList,
    MusicList   // 3.
  }
}

 4.写样式

.musicList {
    width: 100%;
    height: 5rem;
    padding: 0.2rem;
    .musicTop {
      width: 100%;
      height: 0.6rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.2rem;
      .title {
        font-size: 0.4rem;
        font-weight: 900;
      }
      .more {
        border: 1px solid #ccc;
        text-align: center;
        line-height: 0.6rem;
        padding: 0 0.2rem;
        border-radius: 0.4rem;
      }
    }

5.在api / home.js中调用接口

//获取发现好歌单
export function getMusicList(){
    return service({
        method:"GET",
        url:"/personalized?limit=10"
    })
}

6.尝试去MusicList.vue文件中获取数据，暂时没用的方法后面会用到

7.通过console.log(res);查看到已经获取了数据

8.写静态轮播组件，之后再写动态的

     
       
          1 
          1
          1
          1
     

9.注释掉上面的组件，写动态组件，要获取数据，这里用到了script中的函数与方法

10.写好歌单的样式

.musicContent {   // 接之前的
      width: 100%;
      height: 3.6rem;
      .van-swipe-item {
        //   margin-right: 0.14rem;
        padding-right: 0.2rem;
        position: relative;
        height: 3.8rem;
        img {
          width: 100%;
          height: 2.4rem;
          border-radius: 0.2rem;
          //   position: absolute;
        }
        .playCount {
          position: absolute;
          z-index: 100;
          right: 0.3rem;
          color: white;
          margin-top: 0.06rem;
          .icon {
            width: 0.3rem;
            height: 0.3rem;
          }
        }
        .name {
          //   position: absolute;
          bottom: 0px;
        }
      }
    }
  }

效果如下：