uniappでローリングロードを実装する方法

ユニアプリでスクロール読み込みを実装する方法: 1. 「onReachBottom(){console.log("...")}」メソッドを使用します。 2. 「..." メソッド。

##このチュートリアルの動作環境: Windows7 システム、uni-app2.5.1 バージョン、Dell G3 コンピューター

推奨 (無料):

uni-app チュートリアル

uniapp は、より多くのデータを読み込むために一番下までスクロールする実装を実装しています

データ量が非常に大きい場合、データのバッチ読み込みが最適化方法です。どのように実装すればよいでしょうか?

onReachBottom

uniapp のライフ サイクル

onReachBottom ページが一番下までスクロールするときのイベント (スクロールビューを一番下までスクロールするときではありません)。データの次のページをプルアップしてロードするために使用されます。たとえば、scroll-view を使用すると、ページ レベルでのスクロールが行われないため、一番下のイベントはトリガーされません

onReachBottom 例:

onReachBottom(){
	console.log("我已经滚动到底部了")}

これは、ページが一番下までスクロールするとトリガーされます。イベント

#このメソッドは、単一のページに適しています。同じページ上で複数のスクロールを行う場合は、

scroll-view

scroll-view

スクロール可能なビュー領域を使用する必要があります。領域のスクロールに使用されます

scroll-view 例:

<scroll-view scroll-y="true" @scrolltolower="lower()" :style="{height:scrollH+&#39;rpx&#39;}">
	// 内容
	</scroll-view>

methods:{
		lower(e)
		{
			console.log("已经滚动到底部了")
		}	
	},
computed:{
		scrollH:function(){
			let sys = uni.getSystemInfoSync();
			let winWidth = sys.windowWidth;
			let winrate = 750/winWidth;
			let winHeight =parseInt(sys.windowHeight*winrate)
			return winHeight	
		}
	}

垂直スクロールを使用する場合は、固定の高さを指定し、css

height# で設定する必要があります。
##詳細については、uniapp のスクロール ビューの高さ調整の問題を参照してください。

# ページが一番下までスクロールした場合

以上がuniappでローリングロードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。