swiper-动态更改数据后轮播点击或拖动失效

Posted 2021-01-13 guoliping

出现的问题：

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(); 重新开始自动切换；