How to solve the problem of sliding failure of dynamically loaded data in swiper?-JS Tutorial-php.cn

How to solve the problem of sliding failure of dynamically loaded data in swiper?

亚连

Release： 2018-06-04 13:59:32

Original

3468 people have browsed it

Below I will share with you an article about swiper that solves the problem of sliding failure of dynamically loaded data. It has a good reference value and I hope it will be helpful to everyone.

Two solutions

1. Initialize swiper after loading the data

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 ='' + resultdata.msg + '';
	}else{
		for(var i in dataList){
			var data = dataList[i];
			html += ''
			+ '
'
			+ '
'
			+ '
'
			+ ''
			+ '
'+''
			+ '
' + data.artistName + ''
			+ '' + data.artworkName + ''
			+ ''+ data.typeName +'/'+ data.width + '*' + data.height +'/' +data.createYear + ''
			+ '
'
			+ '
￥'+ data.marketPrice +'
'
			+ '删除
';
		}
		
	}
	$("#list").append(html);
	//swiper初始化 
	var swiper = new Swiper('.swiper-container', {
		pagination: '.swiper-pagination',
		slidesPerView: 'auto',
		paginationClickable: true,
		spaceBetween: 0
	});
}

Copy after login

2. Add two lines of code to swiper initialization

swiper1 = new Swiper('.swiper-container', { 
 initialSlide :0, 
 observer:true,//修改swiper自己或子元素时，自动初始化swiper 
 observeParents:true//修改swiper的父元素时，自动初始化swiper 
});

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to turn off the caching function of Vue calculated properties. What are the specific steps?

What are the specific methods of using Compass in Vue?

Use the swiper component in vue2.0 to implement carousel (detailed tutorial)

The above is the detailed content of How to solve the problem of sliding failure of dynamically loaded data in swiper?. For more information, please follow other related articles on the PHP Chinese website!