使用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的效果消失问题的更多相关文章

  1. swiper 解决动态加载数据滑动失效的问题

    两种解决方法 第一种解决办法: success:function(result){ var resultdata =eval("("+result+")"); ...

  2. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  3. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  4. Android Scrollview嵌套下listView动态加载数据,解决onScrollChanged执行多次数据重复问题

    这一篇博客和上一篇讲的都是listView的动态加载,但有所不同的是,本篇的listView是嵌套在ScrollView下的,有时候在一个Activity中可能分为好几个模块,由于展示的需要(手机屏幕 ...

  5. mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)

    mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...

  6. selenuim和phantonJs处理网页动态加载数据的爬取

    一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -* ...

  7. 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取

    1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...

  8. Extjs-树 Ext.tree.TreePanel 动态加载数据

    先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...

  9. MiniUI treeGrid 动态加载数据与静态加载数据的区别

    说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...

随机推荐

  1. [转]OpenSessionInView模式

    OpenSessionInView模式解决的问题:   * hibernate事物边界问题   * 因session关闭导致hibernate延迟加载例外的问题 事物边界:     一个事物的完成应该 ...

  2. 修改ORACLE实例名

    修改数据库的SID  举例说明,我的数据库的SID叫testdb,现在要改成oral.更改ORACLE数据库的sid,涉及到的用东西比较多,但是大概来说就以下六步. 1.停止所有的Oracle服务.  ...

  3. iptables最常用的规则示例

    iptables v1.4.21 iptables基础 规则(rules)其实就是网络管理员预定义的条件,规则一般的定义为“如果数据包头符合这样的条件,就这样处理这个数据包”.规则存储在内核空间的信息 ...

  4. HDU 1864 Brave Game 【组合游戏,SG函数】

    简单取石子游戏,SG函数的简单应用. 有时间将Nim和.SG函数总结一下……暂且搁置. #include <cstdio> #include <cstring> #define ...

  5. Visio中旋转文本框与箭头平行

    如图想要让文本框和箭头平行,按住shift,可以画出水平或者垂直的线,线是斜的,用文本框来标识,要框和线平行,那可以这样做: 打开视图  -  任务窗格 - 大小和位置,然后先单击选中斜线 左下角倒数 ...

  6. Inno Setup自定义卸载文件名称的脚本

    Inno Setup 支持在同一个目录中安装多个应用程序,所以根据安装的先后次序自动将卸载程序文件命名为 unins000.exe,unins001.exe,unins002.exe 等等.这是 IN ...

  7. VirtualBox的网络配置,Host Only+NAT方式

    其实网络这类相关的文章很多,我只是想结合自己的实际情况,把我的经验写下来,给那些需要的人们吧. 主机:windows xp 虚拟机:ubuntu 10.10 Virtualbox:4.0.2 虚拟机在 ...

  8. ylbtech-LanguageSamples-PythonSample

    ylbtech-Microsoft-CSharpSamples:ylbtech-LanguageSamples-PythonSample 1.A,示例(Sample) 返回顶部 本示例演示如何使用 C ...

  9. Android应用内使用新浪微博SDK发送微博(不调用微博客户端)

    需求 手头的一个应用需要添加分享到新浪微博的功能,这个功能在现在的应用上是非常的普遍的了. 分享到新浪微博,其实就是发送一条特定内容的微博,所以需要用到新浪微博SDK了. 微博SDK SDK的下载地址 ...

  10. Cocos2d-x3.0游戏实例之《别救我》第七篇——物理世界的碰撞检測

    事实上我也非常吃惊-居然写到第七篇了,我估计也就是四篇的内容,感觉非常奇妙,我也不会非常唠叨什么吖);    // 0001 );   // 0001 ); // 0001 这样我们才干监听到它们的碰 ...