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


Posted in Javascript onFebruary 26, 2018

两种解决方法

1、数据加载后进行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 解决动态加载数据滑动失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
符合标准的js表单提交的代码
Sep 13 Javascript
JQuery 常用操作代码
Mar 14 Javascript
js字符串转成JSON
Nov 07 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
JavaScript登录记住密码操作(超简单代码)
Mar 22 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
解决Angular.js中使用Swiper插件不能滑动的问题
Feb 26 #Javascript
Angular5中调用第三方js插件的方法
Feb 26 #Javascript
angular2中使用第三方js库的实例
Feb 26 #Javascript
vue 子组件向父组件传值方法
Feb 26 #Javascript
vue2 前端搜索实现示例
Feb 26 #Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 #Javascript
vue的全局提示框组件实例代码
Feb 26 #Javascript
You might like
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Vue2.X 通过AJAX动态更新数据
2018/07/17 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
详解Python之unittest单元测试代码
2018/01/24 Python
浅谈python写入大量文件的问题
2018/11/09 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
Shell编程面试题
2012/05/30 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
大学生自我评价范文
2015/03/03 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
浅谈Redis的事件驱动模型
2022/05/30 Redis