スワイパーで動的にロードされたデータのスライド障害の問題を解決するにはどうすればよいですか?

今回は、動的にロードされたデータのスライド障害の問題を解決する Swiper に関する記事を共有します。これは良い参考値であり、皆様のお役に立てれば幸いです。

2つの解決策

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 lazy"  src="/static/imghwm/default1.png"  data-src="&#39;+ data.artistAvatar +&#39;"    / alt="スワイパーで動的にロードされたデータのスライド障害の問題を解決するにはどうすればよいですか?" >&#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. スワイパーの初期化に2行のコードを追加します

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

上記は私が皆さんのためにコンパイルしたものです。将来役に立ちます。みんな役に立ちます。

関連記事:

Vue の計算プロパティのキャッシュ機能をオフにする方法 具体的な手順は何ですか?

Vue で Compass を使用するための具体的な方法はありますか?

vue2.0のスワイパーコンポーネントを使用してカルーセルを実装します(詳細なチュートリアル)

以上がスワイパーで動的にロードされたデータのスライド障害の問題を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。