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 解决动态加载数据滑动失效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持菜鸟教程(cainiaojc.com)。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#cainiaojc.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。