swiper在angularjs中使用循环轮播失效的解决方法

发布时间：2020-12-17 07:04:52 所属栏目：安全来源：网络整理

导读：bug描述：我在anjularjs 中使用了swiper轮播图，通过动态获取到数据插入swiper-slide中，我在swiper初始化中设置了loop(循环),但是在出现了一点小问题，swiper会失效，划不动，当我设置固定的数据通过ng-src 插入到swiper-silde中，会正常轮播，但是第一张图

bug描述：我在anjularjs 中使用了swiper轮播图，通过动态获取到数据插入swiper-slide中，我在swiper初始化中设置了loop(循环),但是在出现了一点小问题，swiper会失效，划不动，当我设置固定的数据通过ng-src 插入到swiper-silde中，会正常轮播，但是第一张图会出现空白。通过查询了资料，发现swiper和angularjs执行的机制是不同的，swiper的机制是：初始化的时候自动扫描swiper-wrapper类下有多少个swiper-slide类块，则允许滑动多少个块。而在angular始终在swiper初始化之后定义，swiper则无法正确scan有多少个slide（实际上找到一个待循环模板），所以划不动。

我在网上搜了一点资料很多人都是通过添加两个属性就解决了，但我的还是不行，以下为插入的属性。

 
    ? 
   
         observer: 
         true 
         , 
         //修改swiper自己或子元素时，自动初始化swiper 
        
         observeParents: 
         true 
         , 
         //修改swiper的父元素时，自动初始化swiper12

我通过在link中初始化swiper中添加延时计时器，可以解决，尽管我延迟的时间设置为0,但是正常的效果出现了，我也不知道什么问题，如果有人知道可以解答一下。

以下为我的代码,html代码如下

 
    ? 
   

 
       
         < 
         div 
         class 
         = 
         "swiper-slide" 
         ng-repeat 
         = 
         "item in arr" 
         > 
        
 
         ? 
         < 
         img 
         ng-src 
         = 
         "img/{{item}}" 
         alt 
         = 
         "" 
         /> 
        
 
         </ 
         div 
         > 
        
 
     

指令中的代码如下

 
    ? 
   
         link: 
         function 
         (){ 
        
         setTimeout( 
         function 
         (){ 
        
         var 
         swiper= 
         new 
         Swiper( 
         ".swiper3" 
         ,{ 
        
         pagination:  
         ‘.swiper-pagination3‘ 
         , 
        
         paginationClickable:  
         true 
         , 
        
         centeredSlides:  
         true 
         , 
        
         autoplay: 2000, 
        
         loop :  
         true 
         , 
        
         autoplayDisableOnInteraction:  
         false 
         , 
        
          ? 
        
         ? 
         }); 
        
         },0); 
        
         }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!