在上一节Vue 图标列表组件 （音乐app项目-第3步）_Zhichao_97的博客-CSDN博客基础上实现发现好歌单，效果如下：

 

流程：

1.新建musicList.vue组件：

 musicList.vue：

<template>
    <div class="musicList">
        <div class="musicList-top">
            <div class="title">发现好歌单</div>
            <div class="more">查看更多</div>
        </div>
        <div class="mList">
            <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,i) in musicList" :key="i">
                        <img :src="item.picUrl" alt="item.name">
                        <div class="name">{{item.name}}</div>
                        <div class="count">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-bofangsanjiaoxing"></use>
                            </svg>
                            <span>{{changeValue(item.playCount)}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Swiper from "swiper";
    import {getMusicList} from "../api";
    import 'swiper/css/swiper.css';

    export default {
        name: "musicList.vue",

        data:function(){
            return{
                musicList:[],
            }
        },

        async mounted() {
            let result = await getMusicList();
            this.musicList = result.data.result;
        },

        methods:{
            changeValue:function (num) {
                let res = 0;
                if (num>=100000000){
                    res = num/100000000
                    res = res.toFixed(2) + '亿'
                }
                else if (num>10000){
                    res = num/10000
                    res = res.toFixed(2) + 'w'
                }
                return res
            }
        },

        updated() {
            // swiper配置
            var swiper = new Swiper(".mySwiper", {
                slidesPerView: 3,  // 每页显示3个slider
                spaceBetween: 20,  // slider的间距
                centeredSlides: true,
                loop: true, // 循环模式选项

                // pagination: {
                //     el: ".swiper-pagination",
                //     clickable: true,
                // },
            });
        }
    }
</script>

<style scoped>
    .musicList{
        width: 7.5rem;
        padding: 0 0.4rem;
    }
    .musicList-top{
        height: 1rem;
        display: flex;  /*弹性布局*/
        justify-content: space-between;  /*在两边平均分布*/
        align-items: center;  /*侧轴居中*/
    }
    .title{
        font-size: 0.4rem;
        font-weight: 900;
    }
    .more{
        border: 1px solid #cccccc;
        border-radius: 0.2rem;
        font-size: 0.24rem;
        height: 0.5rem;
        width: 1.2rem;
        text-align: center;
        line-height: 0.5rem;
    }
    .swiper-slide{
        display: flex;
        flex-direction: column;
        position: relative;
    }
    img{
        width: 100%;
        height: auto;
        border-radius: 0.1rem;
        padding: 0;
    }
    .name{
        height: 0.6rem;
        width: 100%;
        font-size: 0.24rem;
        line-height: 0.4rem;
        color: #313230;
    }
    .count{
        position: absolute;
        top: -0.3rem;
        left: 0.8rem;
        width: 1rem;
        height: 1rem;
        font-size: 0.14rem;
        color: #cccccc;
        display: flex;
        align-items: center;
    }
    .swiper{
        width: 100%;
        height: 3rem;
    }
    .icon{
        fill: #cccccc;
    }

    /*.swiper-pagination{*/
    /*    position: absolute;*/
    /*    top: 10.5rem;*/
    /*    height: 0.1rem;*/
    /*}*/
</style>

2.可以发现在musicList.vue中需调用网易云api

 index.js:

import axios from 'axios'

let baseUrl = 'http://localhost:3000';

// 获取轮播图的api，type为资源类型,0: pc，1: android，2: iphone，3: ipad
export function getBanner(type=2){
    return axios.get(`${baseUrl}/banner?type=${type}`);
}

// 获取推荐歌单 默认10条数据
export function getMusicList(limit=10) {
    return axios.get(`${baseUrl}/personalized?limit=${limit}`)
}

3.在HomeView.vue中应用musicList.vue组件：

HomeView.vue：

<template>
  <div class="home">
    <top-nav></top-nav>
    <swiper-com></swiper-com>
    <icon-list></icon-list>
    <music-list></music-list>
  </div>
</template>

<script>
  import topNav from "../components/topNav.vue";
  import swiperCom from "../components/swiperCom.vue";
  import iconList from "../components/iconList.vue";
  import musicList from "../components/musicList.vue";

  export default {

    name: 'HomeView',

    components: {
      topNav,
      swiperCom,
      iconList,
      musicList,
    },



  }
</script>

<style lang="less" scoped>

</style>

标签：vue,res,app,音乐,height,musicList,歌单,rem,swiper
来源： https://blog.csdn.net/ChaoChao66666/article/details/123633080