So implementieren Sie das rollierende Laden in Uniapp

So implementieren Sie das Scrolling-Laden in Uniapp: 1. Verwenden Sie die Methode „onReachBottom(){console.log(“...)}“ 2. Verwenden Sie „..."-Methode.

Die Betriebsumgebung dieses Tutorials: Windows7-System, uni-app2.5.1-Version, Dell G3-Computer

Empfohlen (kostenlos). ): Uni-App-Tutorial

Uniapp implementiert das Scrollen nach unten, um mehr Daten zu laden

Wenn die Datenmenge sehr groß ist, ist das Laden von Datenstapeln eine Optimierungsmethode. Wie kann man sie also implementieren? onReachBottom

uniapp Lebenszyklus onReachBottom Das Ereignis, wenn die Seite nach unten scrollt (nicht nach unten scrollen), wird oft verwendet, um beim Scrollen die nächste Seite mit Daten aufzurufen und zu laden -view verwendet wird und die Seitenebene nicht gescrollt wird, wird das Ereignis nicht ausgelöst.

onReachBottom
页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动，则触底事件不会被触发

onReachBottom 示例：

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

当页面滚动到底部时就会触发这个事件

这种方式适用于单个页面，如果同一个页面有多处滚动，那么就该使用scroll-view

scroll-view

可滚动视图区域。用于区域滚动

scroll-view 示例：

<scroll-view scroll-y="true" @scrolltolower="lower()" :  style="max-width:90%">
	// 内容
	</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 设置 heightonReachBottom Beispiel:

rrreee

Dieses Ereignis wird ausgelöst, wenn die Seite nach unten scrollt img src="https://img.php.cn/upload/article/000/ 000/020/a2e7f5fd6830e3a72d35c31579694c27-0.png" alt="Bildbeschreibung hier einfügen"/>

Diese Methode eignet sich für eine einzelne Seite . Wenn mehrere Scrolls auf derselben Seite vorhanden sind, sollte scroll-view height verwendet werden.

Weitere Informationen finden Sie unter: Scroll-Ansicht Höhenanpassungsproblem in Uniapp

Wenn die Seite nach unten scrollt 🎜🎜🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das rollierende Laden in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!