vue中swiper轮播图数据未获取完成,但是页面已经渲染完成了,指示器点不显示或跑偏;
主要原因:初始化轮播图方法放在了mounted,数据还没拿完就渲染dom了
mounted() {
// 初始化swiper
this.initSwiper();
},
解决方法:初始化轮播图方法放在请求数据赋值完成之后,并且异步去初始化轮播图;
this.bannerList = res.data.chart;
this.bannerList.forEach((item,index)=>{
item.active = index == 0;
});
setTimeout(() => {
// 初始化swiper
this.initSwiper();
},100);