使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题、原因是ajax加载后,原先new 的Swiper对象,不认识新来的DOM对象,所以要把ajax之后的DOM也绑定到swiper的事件,就得重新声明Swiper对象,也就是重新声明Swiper对象。
目前有两种解决方法:(第二种方法不成功)
1.在动态获取数据后马上对swiper进行初始化
$.ajax({ type:"get", url:finalUrl, dataType:"json", success:function(data){ $("#reportList").empty(); for(var i=0;i<reportLength;i++){ var url="'"+"reportDetial.html"+location.search+"¬iceId="+reportList[i].id+"'"; reportHtml+='<div class="swiper-slide report-item" onclick="reportJump('+url+')">' +'<div class="item-title">'+data.resp[i].title+'</div>' +'<div class="item-content">'+data.resp[i].content+'</div>' +'<div class="item-date">'+data.resp[i].createTime+'</div>' +'</div>'; } $("#reportList").append(reportHtml); var swiper = new Swiper('.swiper-container', { slidesPerView : 3 }); } });
2.在swiper初始化的时候(不成功)
swiper1 = new Swiper('.swiper-container', { initialSlide :0, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper });