uniapp에서 롤링 로딩을 구현하는 방법

uniapp에서 스크롤 로딩을 구현하는 방법: 1. "onReachBottom(){console.log("...")}" 메서드를 사용합니다. 2. "..." 방법.

이 튜토리얼의 운영 환경: Windows7 시스템, uni-app2.5.1 버전, Dell G3 컴퓨터

권장(무료) ): uni-app tutorial

uniapp에서는 더 많은 데이터를 로드하기 위해 하단으로 스크롤을 구현합니다

데이터의 양이 매우 클 경우 데이터를 일괄 로딩하는 것이 최적화 방법인데 어떻게 구현하나요?

onReachBottom

uniapp 라이프 사이클 onReachBottom

페이지가 아래쪽으로 스크롤될 때(아래로 스크롤 보기가 아님) 이벤트로, 다음 데이터 페이지를 끌어오고 로드하는 데 자주 사용됩니다. 스크롤 뷰를 사용하고 페이지 수준을 스크롤하지 않으면 하단에 도달합니다. 이벤트가 트리거되지 않습니다

onReachBottom
页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用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
onReachBottom 예:

rrreee

이 이벤트는 페이지가 하단으로 스크롤될 때 트리거됩니다.

이 방법은 단일 페이지에 여러 개의 스크롤이 있는 경우 scroll-view를 사용해야 합니다. 높이

자세한 내용은 스크롤을 참조하세요. uniapp에서 뷰 높이 적응 문제🎜🎜페이지가 아래쪽으로 스크롤될 때🎜🎜🎜🎜🎜🎜🎜

위 내용은 uniapp에서 롤링 로딩을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!