欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

动态加载数据滑动总是失效怎么办

程序员文章站 2022-03-20 10:16:20
...
这次给大家带来动态加载数据滑动总是失效怎么办,解决动态加载数据滑动总是失效的注意事项有哪些,下面就是实战案例,一起来看一下。

两种解决方法

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 ='<p class="noCollect">' + resultdata.msg + '</p>';
	}else{
		for(var i in dataList){
			var data = dataList[i];
			html += '<p class="swiper-container artistp">'
			+ '<p class="swiper-wrapper">'
			+ '<p class="swiper-slide workp">'
			+ '<p class="app_inlineBlock workPic">'
			+ '<img class="picImg" src="'+ data.artistAvatar +'" />'
			+ '</p>'+'<p class="app_inlineBlock workInfo">'
			+ '<p class="artistName">' + data.artistName + '</p>'
			+ '<p class="workName">' + data.artworkName + '</p>'
			+ '<p class="workValue">'+ data.typeName +'/'+ data.width + '*' + data.height +'/' +data.createYear + '</p>'
			+ '</p><p class="app_inlineBlockRight workPrice">'
			+ '<p class="price">¥'+ data.marketPrice +'</p></p></p>'
			+ '<p class="swiper-slide delBtn">删除</p></p></p>';
		}
		
	}
	$("#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 
});

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

JS怎样操作改变radio的状态

var foo = function () {} 和 function foo()的区别

bootstrap table怎样设置为高度百分比

以上就是动态加载数据滑动总是失效怎么办的详细内容,更多请关注其它相关文章!