Swiper에서 동적으로 로드된 데이터의 슬라이딩 실패 문제를 해결하는 방법은 무엇입니까?

이제 동적으로 로드된 데이터의 슬라이딩 오류 문제를 해결하는 swiper에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

두 가지 솔루션

1. 데이터를 로드한 후 스와이퍼를 초기화합니다

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. 스와이퍼 초기화에 두 줄의 코드를 추가합니다

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

위 내용은 제가 모두를 위해 작성한 것입니다. 앞으로 도움이 될 것입니다. 모두 도움이 됩니다.

관련 기사:

Vue 계산 속성의 캐싱 기능을 끄는 방법은 무엇입니까?

Vue에서 Compass를 사용하는 구체적인 방법이 있나요?

vue2.0의 swiper 구성 요소를 사용하여 캐러셀 구현(자세한 튜토리얼)

위 내용은 Swiper에서 동적으로 로드된 데이터의 슬라이딩 실패 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!