使用网易云api、Vue 和swiper实现轮播图 （音乐app项目-第2步）

效果：

实现流程：

        在上一篇博客（vue Swiper 实现轮播图_Zhichao_97的博客-CSDN博客）中，已经实现了轮播图效果，但是轮播图的图片是本地的。如果想请求网易云api来更新轮播图的图片，就需要用axios来请求数据。

1.安装axios：npm install axios --save

2.启动网易云api服务，详细请见（网易云音乐 api 下载和运行_Zhichao_97的博客-CSDN博客）

3.在 （vue Swiper 实现轮播图_Zhichao_97的博客-CSDN博客）基础上，修改swiperCom.vue代码，如下：

<template>
    <div class="swiper">
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!--        <div class="swiper-button-prev"></div>-->
        <!--        <div class="swiper-button-next"></div>-->

        <!-- 如果需要滚动条 -->
        <!--        <div class="swiper-scrollbar"></div>-->
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,i) in imgs" :key="i">
                <img :src="item.pic">
            </div>
        </div>

    </div>
</template>

<script>
    import 'swiper/css/swiper.css';
    import Swiper from 'swiper';
    import axios from 'axios'



    export default {
        name: "swiper-com",

        data:function(){
            return {
                imgs:[
                    {pic:require('../assets/img/slider1.jpg')},
                    {pic:require('../assets/img/slider2.jpg')},
                    {pic:require('../assets/img/slider3.jpg')},
                ],
            }
        },

        async mounted() {
            var mySwiper = new Swiper('.swiper', {
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },
            });
            let res = await axios.get('http://localhost:3000/banner?type=2');
            this.imgs = res.data.banners;
        }
    }
</script>

<style>
    .swiper{
        width: 7.5rem;
        height: 4rem;
        border-radius: 0.1rem;

    }
    .swiper-pagination{
        position: absolute;
        top: 3.5rem;
    }
    .swiper-slide{
        text-align: center;
    }
    img{
        max-width: 100%;
        padding: 10px;

    }
    .swiper-pagination-bullet-active{
        background-color: orange;
    }
</style>

4.nmp run serve 查看页面

音乐app项目下一节：

Vue 图标列表组件 （音乐app项目）_Zhichao_97的博客-CSDN博客