使用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. JavaScript 开发的45个技巧

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  2. Signavio

    Signavio web建模器 从version 4.1开始,jBPM绑定了一个完全开源的基于web的BPM设计器工具 叫做'Signavio'.这个Signavio web建模器是和JBoss jB ...

  3. 查看iOS Crash logs

    当应用在设备中运行发生崩溃,iOS将记录这些错误日志并且创建了崩溃报告(Crash Report).崩溃报告中包含了iOS的版本.日期.异常类型.堆栈跟踪以及其他信息. ① 在Xcode中查看崩溃报告 ...

  4. Openshift部署Zookeeper和Kafka

    部署Zookeeper github网址 https://github.com/ericnie2015/zookeeper-k8s-openshift 1.在openshift目录中,首先构建imag ...

  5. Endnote在latex中的应用的两种方法

    从endnote中向latex文档批量插入参考文献的两种方法 一.若是latex模板中参考文献编写的命令是: \begin{thebibliography} \bibitem{lab1}LIU M L ...

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

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

  7. sqlmap原理及使用方法

    1 . 介绍1.1 要求 1.2 网应用情节 1.3 SQL 射入技术 1.4 特点 1.5 下载和更新sqlmap 1.6 执照 2 . 用法2.1 帮助 2.2 目标URL 2.3 目标URL 和 ...

  8. vim配置python开发环境(转)

    安装 因为许多Unix衍生系统已经预装了Vim,我们首先要确认编辑器是否成功安装: vim --version 如果已经安装了,你应该看到类似下面的文字: VIM - Vi IMproved 7.3 ...

  9. [CF 276C]Little Girl and Maximum Sum[差分数列]

    题意: 给出n项的数列A[ ], q个询问, 询问 [ l, r ] 之间项的和. 求A的全排列中该和的最大值. 思路: 记录所有询问, 利用差分数列qd[ ], 标记第 i 项被询问的次数( 每次区 ...

  10. OpenGL(八)使用 subroutine 切换可编程管线

    Subroutine 功能是在OpenGL 4.0 版本号里才添加的.因此对于各种Android手机.这个功能基本跪了.假设你发现你的程序报错:ARB_shader_subroutine.那就说明当前 ...