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

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 =&#39;<p class="noCollect">&#39; + resultdata.msg + &#39;</p>&#39;;
	}else{
		for(var i in dataList){
			var data = dataList[i];
			html += &#39;<p class="swiper-container artistp">&#39;
			+ &#39;<p class="swiper-wrapper">&#39;
			+ &#39;<p class="swiper-slide workp">&#39;
			+ &#39;<p class="app_inlineBlock workPic">&#39;
			+ &#39;<img class="picImg" src="&#39;+ data.artistAvatar +&#39;" />&#39;
			+ &#39;</p>&#39;+&#39;<p class="app_inlineBlock workInfo">&#39;
			+ &#39;<p class="artistName">&#39; + data.artistName + &#39;</p>&#39;
			+ &#39;<p class="workName">&#39; + data.artworkName + &#39;</p>&#39;
			+ &#39;<p class="workValue">&#39;+ data.typeName +&#39;/&#39;+ data.width + &#39;*&#39; + data.height +&#39;/&#39; +data.createYear + &#39;</p>&#39;
			+ &#39;</p><p class="app_inlineBlockRight workPrice">&#39;
			+ &#39;<p class="price">￥&#39;+ data.marketPrice +&#39;</p></p></p>&#39;
			+ &#39;<p class="swiper-slide delBtn">删除</p></p></p>&#39;;
		}
		
	}
	$("#list").append(html);
	//swiper初始化 
	var swiper = new Swiper(&#39;.swiper-container&#39;, {
		pagination: &#39;.swiper-pagination&#39;,
		slidesPerView: &#39;auto&#39;,
		paginationClickable: true,
		spaceBetween: 0
	});
}

2. Add two lines of code to swiper initialization

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

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

Related articles:

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!