问题描述
swiper轮播图使用静态数据时能够正常自动轮播,使用从后台获取到的数据时轮播图不动了
问题原因
据说,swiper初始化时会将swiper-wrapper下的最后一个slide克隆到第一个位置,将第一个slide克隆到最后一个位置,然后自动扫描swiper-wrapper下有多少个slide,就允许滑动多少个slide。
在我们异步请求数据前,swiper-wrapper下没有slide,故不会自动轮播。
问题解决
获取到异步数据后再初始化swiper,步骤如下
1.封装swiper初始化方法
createSwiper() {
this.swiper = new Swiper(".swiper-container_1", {
// observer: true, //修改swiper自己或子元素时,自动初始化swiper
// observeParents: true, //修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 0,
stopOnLastSlide: false,
disableOnInteraction: false
},
allowTouchMove: false,
loop: true,
speed: 5500,
slidesPerView: "auto",
centeredSlides: true,
// watchSlidesProgress: true,
preventClicks: false,
preventClicksPropagation: false,
});
},
2.在axios请求成功回调函数里调用swiper初始化方法
this.$axios({
method: "get",
url: "请求接口",
params: {
//请求参数
}
}).then(res => {
if (res.status == 200) {
// 获取数据成功
this.data= res.data;
//获取数据后再进行初始化
this.$nextTick(() => {
this.createSwiper();
});
} else {
this.$message.error("获取数据失败");
}
});