首页 > 其他 > 详细

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

时间:2018-10-16 16:48:37      阅读:269      评论:0      收藏:0      [点我收藏+]

出现的问题:

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-动态更改数据后轮播点击或拖动失效

原文:https://www.cnblogs.com/guoliping/p/9798775.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!