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隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
Javascript前端经典的面试题及答案
Mar 14 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
解决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入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
php实现json编码的方法
2015/07/30 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
Dojo 学习要点
2010/09/03 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
js数组的操作指南
2014/12/28 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
2015/08/25 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
js表单验证实例讲解
2016/03/31 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
python 实现任务管理清单案例
2020/04/25 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
查环查孕证明
2014/01/10 职场文书
教师申诉制度
2014/01/29 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
出国留学经济担保书
2014/04/01 职场文书
应届大专生自荐书
2014/06/16 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
个人求职信格式范文
2015/03/20 职场文书
销售经理岗位职责范本
2015/04/02 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
四风之害观后感
2015/06/09 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
基于Python实现将列表数据生成折线图
2022/03/23 Python