可能是因为数据是动态渲染的,在请求到数据之前,就已经完成了swiper的初始化,因此解决方案有:
1.swiper组件添加v-if:(如以下代码中的v-if="banner.length")
<!-- 轮播图 --> <div :class="$style.newsBanner"> <div :class="$style.swiperBox"> <swiper ref="newsSwiper" :options="swiperOptions" :class="$style.swiper" v-if="banner.length" > <swiper-slide v-for="(el, index) in banner" :key="index"> <img :src="el.src" style="height: 100%; width: 100%" /> </swiper-slide> <div class="swiper-pagination" :class="$style.swiperPaginationNews" slot="pagination" ></div> </swiper> </div> </div> data() { return { swiperOptions: { loop: true, speed: 500, autoplay: { delay: 4000, stopOnLastSlide: false, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: "bullets", clickable: true, }, observer: true, //修改swiper自己或子元素时,自动初始化swiper observeParents: true, //修改swiper的父元素时,自动初始化swiper }, banner: [], list: [], data: [], active: 0, }; },
2.参考以下博客,获取到数据时初始化:
https://www.nhooo.com/note/qagvr7.html
标签:初始化,插件,自动,loop,失效,true,swiper From: https://www.cnblogs.com/nangras/p/17836028.html