9.发现歌单数据获取

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

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

2.写好组件

<template>
    <div class="musicList">
      <div class="musicTop">
        <div class="title">发现好歌单</div>
        <div class="more">查看更多</div>
      </div>
    </div>
</template>

3.在HomeView.vue中引入

<MusicList/>  // 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文件中获取数据，暂时没用的方法后面会用到

<script>
  import { getMusicList } from "@/request/api/home.js";
  import { reactive, onMounted } from "vue";  // 1. 引入，响应式
  export default {
    //Vue2
    // data() {
    //   return {
    //     musicList: [],
    //   };
    // },
    // methods: {
    //   async getGnedan() {
    //     let res = await getMusicList();
    //     console.log(res);
    //     this.musicList = res.data.result;
    //   },
    //   changeCount: function (num) {
    //     if (num >= 100000000) {
    //       return (num / 100000000).toFixed(1) + "亿";
    //     } else if (num >= 10000) {
    //       return (num / 10000).toFixed(1) + "万";
    //     }
    //   },
    // },
    // mounted() {
    //   this.getGnedan();
    // },
    // Vue3
    setup() {
      const state = reactive({  // 2.创建响应式对象
        musicList: [],                                                               
      });
      function changeCount(num) {  // 6.使用该方法
        if (num >= 100000000) {
          return (num / 100000000).toFixed(1) + "亿";
        } else if (num >= 10000) {
          return (num / 10000).toFixed(1) + "万"; 
        }
      }
      onMounted(async () => {            // 3. 
        let res = await getMusicList(); 
        console.log(res);
        state.musicList = res.data.result;
      }); 
      return { state,changeCount };   // 4. 使用的话先返回
    },
  };
  </script>

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

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

<div class="musicContent">
     <!-- show-indicators="false"把轮播属性设置为无 -->
     <van-swipe :loop="false" :width="150" class="my-swipe" :show-indicators="false">  
          <van-swipe-item>1</van-swipe-item> 
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>1</van-swipe-item>
     </van-swipe>
</div>

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

<template>
    <div class="musicList">
      <div class="musicTop">
        <div class="title">发现好歌单</div>
        <div class="more">查看更多</div>
      </div>
      <div class="musicContent">
        <van-swipe
          :loop="false" 
          :width="130"
          class="my-swpie"
          :show-indicators="false"
        >
        <!-- 5. 渲染后面加state前缀  state.musicList -->
        <!-- 路由传参router-link实现跳转，to属性有两个属性，query根据id传参 -->
          <van-swipe-item v-for="item in state.musicList" :key="item">   
        <!-- <router-link :to="{path:'/itemMusic',query:{id:item.id}}"> -->
            <img :src="item.picUrl" alt="" />
            <span class="playCount">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gl-play-copy"></use>   
              </svg>  
              {{ changeCount(item.playCount) }}
            </span>
            <span class="name">{{ item.name }}</span>
            </router-link>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </template>

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;
        }
      }
    }
  }

效果如下：