Heim > Web-Frontend > uni-app > Hauptteil

So implementieren Sie das rollierende Laden in Uniapp

藏色散人
Freigeben: 2023-01-13 00:44:30
Original
7491 Leute haben es durchsucht

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

So implementieren Sie das rollierende Laden in Uniapp

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("我已经滚动到底部了")}
Nach dem Login kopieren

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

So implementieren Sie das rollierende Laden in Uniapp

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

scroll-view

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

scroll-view 示例:

<scroll-view scroll-y="true" @scrolltolower="lower()" :  style="max-width:90%">
	// 内容
	</scroll-view>
Nach dem Login kopieren
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	
		}
	}
Nach dem Login kopieren

使用竖向滚动时,需要给 一个固定高度,通过 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.

So implementieren Sie das rollierende Laden in UniappWeitere 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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage