解决问题:swiper动态加载图片后无法滑动
原因:swiper在初始化的时候会扫描swiper-wrapper下面的swiper-slide的个数,从而完成初始化,但是由于动态加载时在初始化之后的动作,所以导致无法滑动。
解决方案 1:在动态获取数据后,马上对swiper进行初始化;
1 $.ajax({ 2 type:"get", 3 url:finalUrl, 4 dataType:"json", 5 success:function(data){ 6 $("#reportList").empty(); 7 for(var i=0;i<reportLength;i++){ 8 var url="'"+"reportDetial.html"+location.search+"¬iceId="+reportList[i].id+"'"; 9 reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">' 10 +'<div class="item-title">'+data.resp[i].title+'</div>' 11 +'<div class="item-content">'+data.resp[i].content+'</div>' 12 +'<div class="item-date">'+data.resp[i].createTime+'</div>' 13 +'</div>'; 14 } 15 $("#reportList").append(reportHtml); 16 var swiper = new Swiper('.swiper-container', { 17 slidesPerView : 3 18 }); 19 } 20 });
解决方案2:
1 var mySwiper = new Swiper ('.swiper-container', { 2 observer:true,//修改swiper自己或子元素时,自动初始化swiper 3 observeParents:true,//修改swiper的父元素时,自动初始化swiper 4 loop: true, // 循环模式选项 5 pagination: { 6 el: '.swiper-pagination', 7 }, 8 9 })
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;