vue swiper

//引入这个组件前提要先安装，
import {
        swiper,
        swiperSlide
    } from "vue-awesome-swiper";
//swiper的配置
//data变量里
swiperOption: {
    pagination: {
        el: '.swiper-pagination',
        clickable: true // 允许点击小圆点跳转
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false // 手动切换之后继续自动轮播
    },
       effect : 'fade',//切换方式为淡入淡出
          fade: {
                    crossFade: true,//为true为淡入淡出
        },
    loop: true,//循环轮播
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    }
}

//html部分
<swiper :options="swiperOption" v-if="imgUrl.length">
    <swiper-slide v-for="(item, index) in imgUrl" :key='index'>
        <img :src="item.picUrl" @click="toLink(item.redirectUrl)">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
</swiper>

imgurl 正常请求数据即可，这里需要注意的是 在swiper加个判断 imgUrl.length保证imgUrl加载完再加载下面的，不然循环轮播的参数不起作用，只会播放一遍