swiper-動態更改數據後輪播點擊或拖動失效
阿新 • • 發佈:2018-10-16
初始 進行 tar 核心 date clas pda 第一條 很多
出現的問題:
1、swiper不能自動切換(設置了autoplay)。
2、數據不匹配(需要加載的數據以改變,但是swiper裏面的數據出現錯誤)。
3、數據匹配過後,永遠切換不到第一條數據。
4、根本不能切換,手動拉也拉不動。
總之遇到了很多從來沒有遇到的問題!!!問題所在就是沒有真正的了解swiper提供的方法,最後根據自己需求,靜下心來去看了swiper官網的方法使用,問題解決的差不多了。
真正的核心部分在
observer:true,//修改swiper自己或子元素時,自動初始化swiper observeParents:false,//修改swiper的父元素時,自動初始化swiper onSlideChangeEnd: function(swiper){ swiper.update(); mySwiper.startAutoplay(); mySwiper.reLoop(); }
加上這串代碼後,使用基本正常
mySwiper.reLoop(); 重新對需要循環的slide個數進行計算,當你改變了slidesPerView參數時需要用到,需要自動輪播的時候必須要加上;
swiper.update(); 更新Swiper,這個方法包含了updateContainerSize,updateSlidesSize,updateProgress,updatePagination,updateClasses方法。也就是數據改變是重新初始化一次swiper;
mySwiper.startAutoplay(); 重新開始自動切換;
swiper-動態更改數據後輪播點擊或拖動失效