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 相关文章推荐
JavaScript 对象链式操作测试代码
Apr 25 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
JS判断数组那点事
Oct 10 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
Vue中函数防抖节流的理解及应用实现
Apr 24 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
vue3.0 上手体验
Sep 21 Javascript
解决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
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
php实现随机生成易于记忆的密码
2015/06/19 PHP
php实现留言板功能
2017/03/05 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
飞鱼(shqlsl) javascript作品集
2006/12/16 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
jquery分页插件pagination使用教程
2018/10/23 jQuery
如何使用vuex实现兄弟组件通信
2018/11/02 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
jupyter安装小结
2016/03/13 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
使用tensorflow实现线性svm
2018/09/07 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
python集合的新增元素方法整理
2020/12/07 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
大专自我鉴定范文
2013/10/01 职场文书
专升本自我鉴定
2013/10/10 职场文书
英文自荐信常用句子
2014/03/26 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
教育实习指导教师评语
2014/12/31 职场文书
高中体育课教学反思
2016/02/16 职场文书
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript