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+"¬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
});
swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题的更多相关文章
- swiper 解决动态加载数据滑动失效的问题
两种解决方法 第一种解决办法: success:function(result){ var resultdata =eval("("+result+")"); ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- Android Scrollview嵌套下listView动态加载数据,解决onScrollChanged执行多次数据重复问题
这一篇博客和上一篇讲的都是listView的动态加载,但有所不同的是,本篇的listView是嵌套在ScrollView下的,有时候在一个Activity中可能分为好几个模块,由于展示的需要(手机屏幕 ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- selenuim和phantonJs处理网页动态加载数据的爬取
一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding:utf-8 -* ...
- 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取
1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...
- Extjs-树 Ext.tree.TreePanel 动态加载数据
先上效果图 1.说明Ext.tree.Panel 控件是树形控件,大家知道树形结构在软件开发过程中的应用是很广泛的,树形控件的数据有本地数据.服务器端返回的数据两种.对于本地数据的加载,在extjs的 ...
- MiniUI treeGrid 动态加载数据与静态加载数据的区别
说明:treegrid静态数据加载时数据结构是一棵树包含children节点集合,而采用动态加载数据时数据是List结构的具体项. 静态加载数据 test1.html <!DOCTYPE htm ...
随机推荐
- WEB.NET error:请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping 解决方案
参考 http://blog.csdn.net/kisscatforever/article/details/50579935 今天用了一个组件 一个验证型的组件. 然后出现了这个问题. 我看了网上一 ...
- inno setup 脚本常用修改 转
http://blog.sina.com.cn/s/blog_72c2eb350100y2sa.html 有人提及想更换安装界面的图片,其实方法很简单,只需要修改inno setup安装目录下的Wiz ...
- 控制台+Owin搭建WebAPI接口服务
当没有iis环境.想快速启动几个api接口测试又觉得新建一个api项目麻烦?来使用控制台做宿主,快速改几个api测试吧! 1.新建控制台项目 2.安装以下相关依赖 Microsoft.AspNet.W ...
- 通过pl/sql计算程序的运行时间
在sqlplus中运行sql语句或者pl/sql的时候如果需要统计运行的时间,只需要开启set timing on选项即可. SQL> set timing onSQL>SQL> s ...
- 粗览Activiti Modeler操作和源代码
Activiti Model Editor组件 我的 了解ActivitiExplorer及其Vaadin实现方式博文里提到ActivitiExplorer使用的是Vaadin架构,但是Activit ...
- PostgreSQL配置文件--日志和错误
6 错误操作和日志 ERROR REPORTING AND LOGGING 6.1 日志写到哪里 Where to Log 6.1.1 log_destination 字符串 默认: log_dest ...
- 项目部署问题:xftp无法连接服务器、Nginx403 Forbidden解决、nginx反向代理解决前端跨域问题
一.xftp无法连接服务器 在xftp中配置正确的ip,用户名和密码后,居然无法连接 解决方案:将协议里面的FTP换成SFTP,注意换成SFTP后端口就默认换成22,要还是原来的21就还是连不上的哈 ...
- Maven nexus 安装nexus私服出现的两个问题
1. 在win10中安装nexus时提示:wrapper | OpenSCManager failed - 拒绝访问. (0x5) 主要是没有权限.需要以管理员的身份运行 如果你是直接点击 start ...
- 强大实用的jQuery幻灯片插件Owl Carousel
演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及 ...
- Spark Streaming no receivers彻底思考
数据接入Spark Streaming的二种方式:Receiver和no receivers方式 建议企业级采用no receivers方式开发Spark Streaming应用程序,好处: 1.更优 ...