zoukankan      html  css  js  c++  java
  • 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
    });
  • 相关阅读:
    jmeter学习笔记(二)
    jmeter学习笔记(一)
    让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
    Fiddler抓包
    76. 最小覆盖子串
    Map中getOrDefault()与数值进行比较
    阻塞非阻塞与同步异步的区别
    81. 搜索旋转排序数组 II
    49. 字母异位词分组
    48. 旋转图像
  • 原文地址:https://www.cnblogs.com/fps2tao/p/9334038.html
Copyright © 2011-2022 走看看