..." method."/> ..." method.">
Home > Article > Web Front-end > 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):Methods for uniapp to implement scrolling loading: 1. Use the "onReachBottom(){console.log("...")}" method; 2. Use "
..." method.
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 uniapponReachBottom 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
scroll-view
scroll-view
Scrollable view area. Used for area scrollingscroll-view Example:
<scroll-view scroll-y="true" @scrolltolower="lower()" :style="{height:scrollH+'rpx'}"> // 内容 </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
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!