Rumah hujung hadapan web uni-app uniapp怎么实现滚动加载

uniapp怎么实现滚动加载

Jan 18, 2021 pm 02:08 PM
uniapp

uniapp实现滚动加载的方法:1、使用“onReachBottom(){console.log("...")}”方法;2、通过“<scroll-view scroll-y="true"...}">...”方法。

uniapp怎么实现滚动加载

本教程操作环境:windows7系统、uni-app2.5.1版本,Dell G3电脑。

推荐(免费):uni-app教程

uniapp实现滚动到底部加载更多数据

如果数据量非常大的话,数据批量加载是一种优化手段,那么,如何实现?

onReachBottom

uniapp的生命周期onReachBottom
页面滚动到底部的事件(不是scroll-view滚到底),常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动,则触底事件不会被触发

onReachBottom 示例:

onReachBottom(){
	console.log(&quot;我已经滚动到底部了&quot;)}
Salin selepas log masuk

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

在这里插入图片描述

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

scroll-view

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

scroll-view 示例:

&lt;scroll-view scroll-y=&quot;true&quot; @scrolltolower=&quot;lower()&quot; :style=&quot;{height:scrollH+&#39;rpx&#39;}&quot;&gt;
	// 内容
	&lt;/scroll-view&gt;
Salin selepas log masuk
methods:{
		lower(e)
		{
			console.log(&quot;已经滚动到底部了&quot;)
		}	
	},
computed:{
		scrollH:function(){
			let sys = uni.getSystemInfoSync();
			let winWidth = sys.windowWidth;
			let winrate = 750/winWidth;
			let winHeight =parseInt(sys.windowHeight*winrate)
			return winHeight	
		}
	}
Salin selepas log masuk

使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height

详见:uniapp中scroll view高度适应问题

当页面滚动到底部时

在这里插入图片描述

Atas ialah kandungan terperinci uniapp怎么实现滚动加载. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk memulakan pratonton projek uniapp yang dibangunkan oleh webstorm Bagaimana untuk memulakan pratonton projek uniapp yang dibangunkan oleh webstorm Apr 08, 2024 pm 06:42 PM

Bagaimana untuk memulakan pratonton projek uniapp yang dibangunkan oleh webstorm

Mana satu lebih baik, uniapp atau mui? Mana satu lebih baik, uniapp atau mui? Apr 06, 2024 am 05:18 AM

Mana satu lebih baik, uniapp atau mui?

Apakah alat pembangunan yang digunakan oleh uniapp? Apakah alat pembangunan yang digunakan oleh uniapp? Apr 06, 2024 am 04:27 AM

Apakah alat pembangunan yang digunakan oleh uniapp?

Apakah asas yang diperlukan untuk mempelajari uniapp? Apakah asas yang diperlukan untuk mempelajari uniapp? Apr 06, 2024 am 04:45 AM

Apakah asas yang diperlukan untuk mempelajari uniapp?

Apakah kelemahan uniapp Apakah kelemahan uniapp Apr 06, 2024 am 04:06 AM

Apakah kelemahan uniapp

Perbandingan mendalam antara Flutter dan uniapp: terokai persamaan, perbezaan dan ciri mereka Perbandingan mendalam antara Flutter dan uniapp: terokai persamaan, perbezaan dan ciri mereka Dec 23, 2023 pm 02:16 PM

Perbandingan mendalam antara Flutter dan uniapp: terokai persamaan, perbezaan dan ciri mereka

Mana yang lebih baik, pembangunan uniapp atau asli? Mana yang lebih baik, pembangunan uniapp atau asli? Apr 06, 2024 am 05:06 AM

Mana yang lebih baik, pembangunan uniapp atau asli?

Apakah perpustakaan komponen yang digunakan oleh uniapp untuk membangunkan program kecil? Apakah perpustakaan komponen yang digunakan oleh uniapp untuk membangunkan program kecil? Apr 06, 2024 am 03:54 AM

Apakah perpustakaan komponen yang digunakan oleh uniapp untuk membangunkan program kecil?

See all articles