swiper ajax动态获取数据，轮播图播放问题

深碍√TFBOYSˉ_ 2021-07-24 14:56 476阅读 0赞

**解决方案一:**  
在new swiper时，添加两个属性:

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

此时解决轮播图动态获取不能播放的问题，可能还存在轮播切换时闪动的问题和  
动态添加轮播图后，导致原本图片顺序改变或重复的问题

**解决方案二:**  
在获取完动态数据后，立即初始化swiper

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]  
此时可能出现，轮播图切换闪动的问题

**解决方案三:**  
在获取动态数据后，立即初始化swiper并添加observer:true和observerParents:true属性，可解决上述存在的多种问题

代码示例:

success:function(res)
     			{ 
     				var lbinfo=res.lbinfo;
     				console.log(lbinfo);
    
     				var wrapper=document.querySelector('.swiper-container .swiper-wrapper');
     				for(var i=0;i<lbinfo.length;i++)
     				{ 
     	
     					//创建滑块
     					var slideDiv=document.createElement('div');
     					slideDiv.className='swiper-slide';
     					wrapper.appendChild(slideDiv);
    					coverDiv.setAttribute('swiper-animate-delay','0.3s');
    -----------------------------------------------------------------
     					var mySwiper = new Swiper ('.swiper-container', { 
    				   // direction: 'vertical',
    				    loop: true,
    				    autoplay:3500,
    				    // 如果需要分页器
    				    pagination: '.swiper-pagination',
    				    
    				    // 如果需要前进后退按钮
    				    nextButton: '.swiper-button-next',
    				    prevButton: '.swiper-button-prev',
    				    ***********************
    					observer: true,
    					observerParents: true,
    					***********************
    				    //如果需要滚动条
    				    scrollbar: '.swiper-scrollbar',
    
    				    onInit: function(swiper){  //Swiper2.x的初始化是onFirstInit
    				    swiperAnimateCache(swiper); //隐藏动画元素 
    				    swiperAnimate(swiper); //初始化完成开始动画
    				  }, 
    				  onSlideChangeEnd: function(swiper){  
    				    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
    				  } 
    				  })
     				}
    
    
    
     			}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/28840c8009d341dca61f159be5ca1c42.png