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

 更新时间:2018年02月26日 15:51:38   作者:TinaTxt  
下面小编就为大家分享一篇swiper 解决动态加载数据滑动失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

两种解决方法

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 解决动态加载数据滑动失效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 原生js的弹出层且其内的窗口居中

    原生js的弹出层且其内的窗口居中

    弹出层内含窗口且居中,在本例使用原生js来实现,与网上的有所不一样,大家不妨参考下
    2014-05-05
  • JavaScript中函数声明与函数表达式的区别详解

    JavaScript中函数声明与函数表达式的区别详解

    可能很多朋友只知道两种声明方式一个是函数声明一个是函数表达式,具体有什么不同没能说得很好。事实上,JavaScript的解析器对函数声明与函数表达式并不是一视同仁地对待的。下面看看这两者到底有什么不同。
    2016-08-08
  • xml 与javascript结合的问题解决方法

    xml 与javascript结合的问题解决方法

    xml 与javascript结合的问题解决方法...
    2007-03-03
  • js 键盘记录实现(兼容FireFox和IE)

    js 键盘记录实现(兼容FireFox和IE)

    用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。
    2010-02-02
  • JavaScript实现异步图像上传功能

    JavaScript实现异步图像上传功能

    这篇文章主要介绍了JavaScript实现异步图像上传功能,本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本),同时将其上载到服务器,而无需等待操作完成。需要的朋友可以参考下
    2018-07-07
  • 跨域解决之JSONP和CORS的详细介绍

    跨域解决之JSONP和CORS的详细介绍

    跨域常见的两种方式,分别是jsonp和cors,这篇文章主要介绍了跨域解决之JSONP和CORS的详细介绍,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • 对table和ul实现js分页示例分享

    对table和ul实现js分页示例分享

    本文主要介绍了js对table和ul li实现前台分页,需要的朋友可以参考下
    2014-02-02
  • js点击任意区域弹出层消失实现代码

    js点击任意区域弹出层消失实现代码

    这篇文章主要为大家详细介绍了js点击任意区域弹出层消失实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js实现盒子拖拽动画效果

    js实现盒子拖拽动画效果

    这篇文章主要为大家详细介绍了js实现盒子拖拽动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

    该价格表基于Bootstrap网格系统来进行布局,通过简单的CSS3代码来美化价格表,样式非常的时尚漂亮,且能在不同屏幕下展示良好的效果,需要的朋友可以参考下
    2017-02-02

最新评论