swiper轮播时,用到定时请求后台数据的场景,造成页面刷新时轮播图的指示点和轮播内容错乱。
解决方法是:
声明一个全局变量,轮播时进行销毁 这里我是把轮播为方法
var mySwiper = 0;
function play(){
if (mySwiper !== 0) {
mySwiper.destroy();
}
mySwiper = new Swiper('.swiper-container', {
observer: true,
observeParents: true,
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.next',
prevEl: '.prev'
},
})
}