How to implement rolling loading in uniapp

Methods for uniapp to implement scrolling loading: 1. Use the "onReachBottom(){console.log("...")}" method; 2. Use "..." method.

##The operating environment of this tutorial: windows7 system, uni-app2.5.1 version, Dell G3 computer.

Recommended (free):

uni-app tutorial

uniapp implements scrolling to the bottom to load more data

If the amount of data is very large, batch loading of data is an optimization method, so how to implement it?

onReachBottom

Life cycle of uniapp

onReachBottom The event when the page scrolls to the bottom (not scroll-view to the bottom), often used to pull up and load the next page of data. For example Using scroll-view results in no scrolling at the page level, so the bottom event will not be triggered

onReachBottom Example:

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

This will be triggered when the page scrolls to the bottom Event

#This method is suitable for a single page. If there are multiple scrolls on the same page, you should use

scroll-view

scroll-view

Scrollable view area. Used for area scrolling

scroll-view Example:

<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	
		}
	}

When using vertical scrolling, you need to give a fixed height and set it through css

height

For details, please see: scroll view height adaptation problem in uniapp

When the page scrolls to the bottom

The above is the detailed content of How to implement rolling loading in uniapp. For more information, please follow other related articles on the PHP Chinese website!