..." method."/> ..." method.">

Home  >  Article  >  Web Front-end  >  How to implement rolling loading in uniapp

How to implement rolling loading in uniapp

藏色散人
藏色散人Original
2021-01-18 14:08:157448browse

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

How to implement rolling loading in uniapp

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


How to implement rolling loading in uniapp

#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="{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	
		}
	}

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

How to implement rolling loading in uniapp

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn