swiper动态加载数据轮播滑动异常问题

最近做项目时遇到的问题
开发需求是需要通过接口请求来动态的改变swiper数据
最开始是模拟的数据,这样开始使用起来是没有问题的,但是在使用真实数据后就有一大波问题出现,开始以后是同步异步的问题,所以将swiper的初始化放在了请求数据成功后,但还是没有解决问题。

出现的问题:

1、swiper不能自动切换(设置了autoplay)。

2、数据不匹配(需要加载的数据以改变,但是swiper里面的数据出现错误)。

3、数据匹配过后,永远切换不到第一条数据。

4、根本不能切换,手动拉也拉不动。

总之遇到了很多从来没有遇到的问题!!!问题所在就是没有真正的了解swiper提供的方法,最后根据自己需求,静下心来去看了swiper官网的方法使用,问题解决的差不多了。
HTML代码

<div class="swiper-container">
     <div class="swiper-wrapper">
      </div>
 </div>

JS代码

$.ajax({
                   type: 'get',
                   url: '接口数据',
                   dataType: 'jsonp',
                   success: function success(data) {
                       // console.log(data);
                       var helpNum, limit, str="";
                       helpNum = data.data.help_count;
                       limit = data.data.news_list;
                       // console.log(limit);
                       for (let i = 0; i < limit.length; i++) { 
                           str += `<div class="swiper-slide">
                                           <div class="swpie-item">
                                               <span class="si-vartar"><img
                                                       src="${limit[i].avatar}"
                                                       alt=""></span>
                                               <i>${limit[i].msg}</i>
                                           </div>
                                       </div>
                                   `
                       }
                       // console.log(str);
                       $(".swiper-wrapper").append(str);
                       var mySwiper = new Swiper('.swiper-container', {
                           direction: 'vertical',
                           loop: true,
                           autoplay: true,
                           delay: 3000,
                           observer: true,
                           observeParents: true,
                           onSlideChangeEnd: function(swiper){ 
                            swiper.update();  
                            mySwiper.startAutoplay();
                             mySwiper.reLoop();  
                           }
                       });
                   },
                   error: function error(msg) {
                       console.log(msg);                   
                   }         
           }); 

真正的核心部分在

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

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值