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