vue-awesome-swiper在2020年做了更新,早上想使用vue-awesome-swiper完成vue项目的轮播图,发现一些轮播图不能播放和分页器没显示,经过一个上午,在老师的协助下终于解决了:原来是包版本太高的问题,肯能导致一些不兼容。

后来我指定了版本号,下回低版本

cnpm i vue-awesome-swiper@3

在这里插入图片描述
重启基本上就可以了,但要注意的是在阅读官网的时候最好采用定义组件方式写轮播图,用指令方式可能会出问题。

<swiper ref="mySwiper" :options="swiperOption">
    <swiper-slide :key="banner" v-for="banner in banners">
        <img :src="banner" />
    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
</swiper>
banners: [
    "./src/assets/images/home-swiper01.webp",
    "./src/assets/images/home-swiper02.webp",
    "./src/assets/images/home-swiper03.webp",
    "./src/assets/images/home-swiper04.webp"
],
swiperOption: {
    autoplay: true,
    loop: true,
    autoplay: {
        delay: 2000,
        disableOnInteraction: false
    },
    pagination: {
        el: ".swiper-pagination",
        // clickable: true,
        type: "bullets"
    }
}
Logo

前往低代码交流专区

更多推荐