Comment résoudre le problème de l'échec du glissement des données chargées dynamiquement dans le swiper ?

Ci-dessous, je partagerai avec vous un article sur le swiper qui résout le problème de l'échec du glissement des données chargées dynamiquement. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Deux solutions

1. Initialiser le swiper après le chargement des données

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. Ajoutez deux lignes de code à l'initialisation du swiper

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

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment désactiver la fonction de mise en cache des propriétés calculées de Vue ? Quelles sont les étapes spécifiques ?

Quelles sont les méthodes spécifiques d'utilisation de Compass dans Vue ?

Utilisation du composant swiper dans vue2.0 pour implémenter le carrousel (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!