swiper 解决动态加载数据滑动失效的问题
两种解决方法
第一种解决办法:
success:function(result){
var resultdata =eval("("+result+")");
if(resultdata.status == 1){
var dataList = resultdata.data;
currentPage = resultdata.currentPage;
pageCount = resultdata.pageCount;
var html = "";
if(pageCount == 0){
html ='<div class="noCollect">' + resultdata.msg + '</div>';
}else{
for(var i in dataList){
var data = dataList[i];
html += '<div class="swiper-container artistDiv">'
+ '<div class="swiper-wrapper">'
+ '<div class="swiper-slide workDiv">'
+ '<div class="app_inlineBlock workPic">'
+ '<img class="picImg" src="'+ data.artistAvatar +'" />'
+ '</div>'+'<div class="app_inlineBlock workInfo">'
+ '<div class="artistName">' + data.artistName + '</div>'
+ '<div class="workName">' + data.artworkName + '</div>'
+ '<div class="workValue">'+ data.typeName +'/'+ data.width + '*' + data.height +'/' +data.createYear + '</div>'
+ '</div><div class="app_inlineBlockRight workPrice">'
+ '<div class="price">¥'+ data.marketPrice +'</div></div></div>'
+ '<div class="swiper-slide delBtn">删除</div></div></div>';
} }
$("#list").append(html);
//swiper初始化
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 'auto',
paginationClickable: true,
spaceBetween: 0
});
}
2、swiper初始化加两行代码
swiper1 = new Swiper('.swiper-container', {
initialSlide :0,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true//修改swiper的父元素时,自动初始化swiper
});
swiper 解决动态加载数据滑动失效的问题的更多相关文章
- swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题
使用swiper.js做一些动效时,如果进行了ajax,并且重新把DOM写入到HTML代码中,会导致swiper.js的特效消失的问题.原因是ajax加载后,原先new 的Swiper对象,不认识新来 ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...
- echarts官网上的动态加载数据bug被我解决。咳咳/。
又是昨天,为什么昨天发生了这么多事.没办法,谁让我今天没事可做呢. 昨天需求是动态加载数据,画一个实时监控的折线图.大概长这样. 我屁颠屁颠的把代码copy过来,一运行,caocaocao~bug出现 ...
- mui 动态加载数据出现的问题处理 (silder轮播组件 indexedList索引列表 下拉刷新不能继续加载数据)
mui-slider 问题:动态给mui的图片轮播添加图片,轮播不滚动. 解决:最后把滚动轮播图片的mui(".mui-slider").slider({interval: 300 ...
- 微信小程序(五) 利用模板动态加载数据
利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:
- 爬虫--selenuim和phantonJs处理网页动态加载数据的爬取
1.谷歌浏览器的使用 下载谷歌浏览器 安装谷歌访问助手 终于用上谷歌浏览器了.....激动 问题:处理页面动态加载数据的爬取 -1.selenium -2.phantomJs 1.selenium 二 ...
- 爬虫开发6.selenuim和phantonJs处理网页动态加载数据的爬取
selenuim和phantonJs处理网页动态加载数据的爬取阅读量: 1203 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/ ...
随机推荐
- iOS 工程中 Other Linker Flags
对于64位机子和iPhone OS应用 解决方法是使用-all_load 或者 -force_load. -all_load强迫链接器从它能看见的所有文档中加载所有的对象文件,甚至那些没有OC代码的文 ...
- php命名空间使用总结
从php5.3开始可以使用命名空间,命名空间是为了防止命名 空间的元素重复而使用的.命名空间的元素包括:class.function.const(从php5.3开始在类外部也可以用const定义常量, ...
- Codeforces Round #222 (Div. 1) Maze —— dfs(连通块)
题目链接:http://codeforces.com/problemset/problem/377/A 题解: 有tot个空格(输入时统计),把其中k个空格变为wall,问怎么变才能使得剩下的空格依然 ...
- Java线程面试题 Top 50(转载)
原文链接:http://www.importnew.com/12773.html 本文由 ImportNew - 李 广 翻译自 javarevisited 不管你是新程序员还是老手,你一定在面试中遇 ...
- Android图片加载神器之Fresco, 基于各种使用场景的讲解
Fresco是Facebook开源Android平台上一个强大的图片加载库,也是迄今为止Android平台上最强大的图片加载库. 优点:相对于其他开源的第三方图片加载库,Fresco拥有更好的内存管理 ...
- XML与TreeView
1.treeview代码书写 private void Form1_Load(object sender, EventArgs e) { //代码为TreeView添加子项 treeView1.Con ...
- 【转】澄清P问题、NP问题、NPC问题
首先,原文链接.(这篇文章让我第一次有了感谢腾讯,感谢微信,感谢微信公众号的冲动.总之,非常感谢作者的分享.) 然后:结论图如下 担心万一哪天原网站把这篇文章下线,所以原文内容复制过来. 澄清P问题. ...
- hihoCoser(#1149 : 回文字符序列)
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定字符串,求它的回文子序列个数.回文子序列反转字符顺序后仍然与原序列相同.例如字符串aba中,回文子序列为"a& ...
- bzoj3456
分治+ntt 设dp[i]表示i个点的图联通的方案数 那么考虑dp,利用容斥,总-不符合,枚举j=1->i-1,然后考虑不符合,那么考虑和1联通的连通块,剩下的不和1连通,那么dp[i]=2^t ...
- python_re函数
1,贪婪和非贪婪模式 重复运算符默认是贪婪的,即会进行尽可能多的匹配 代码示例: >>> import re >>> emphasis_pattern = re.c ...