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