swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

使用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+"&noticeId="+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
});

swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

相关推荐