解决问题: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+"&noticeId="+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     })

 

posted @ 2018-10-26 16:56  前端极客  阅读(5864)  评论(0编辑  收藏  举报