슬라이딩 시 데이터의 동적 로딩이 항상 실패하는 경우 어떻게 해야 합니까?

이번에는 동적으로 로드된 데이터의 슬라이딩이 항상 실패하는 경우 어떻게 해야 하는지 알려드리겠습니다. 동적으로 로드된 데이터의 슬라이딩 문제를 해결하려면 다음과 같은 실제 사례를 살펴보겠습니다.

두 가지 해결 방법

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 ='<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="&#39;+ data.artistAvatar +&#39;" />'
			+ '</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. 스와이퍼 초기화에 두 줄의 코드 추가

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

에서 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 이 기사 등 정말 흥미롭습니다. PHP 중국어 웹사이트의 다른 관련 기사에도 주목해 주세요!

추천 자료:

JS를 사용하여 라디오 상태를 변경하는 방법

var foo = function() {}과 function foo()

부트스트랩 테이블을 설정하는 방법 키 비율

위 내용은 슬라이딩 시 데이터의 동적 로딩이 항상 실패하는 경우 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!