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' }, }) }