During the APP production process, a pair of functions that have been used in pull-down refresh and pull-up loading have been used together. We have shared with you the JS-related pull-up loading and pull-down refreshing. Interested friends can refer to:MUI performs APP hybrid development to implement pull-down refresh and pull-up loading
Let's first look at how to use integrated pull-up and pull-up in MUI
Step 1, Step 2 is the same as pull-down refresh
({
subpages:[{
url:pullrefresh-subpage-url,//Drag to refresh the content page address id:pullrefresh-subpage-id,//Content Page Logo styles:{ top:subpage-top-position,//The position at the top of the content page needs to be calculated based on the actual page layout. If you use standard Mui navigation, the default top is 48px; ....//Other parameter definitions }
}]
});
Step 3: Set up pull-up loading and pull-down refresh in () at the same time
({
pullRefresh: {
container: '#pullrefresh',
down: {
contentdown : "Pull down to refresh",//Optional, when the pull-down can refresh the status, the drop-down refreshes the title content displayed on the control. contentover : "Release Refresh immediately",//Optional, when refreshing the refreshable state, pull down to refresh the title content displayed on the control contentrefresh : "Refreshing...",//Optional. When refreshing the status, pull down to refresh the title content displayed on the control. callback: downFn // Pull down to execute the function },
up: {
contentrefresh: 'Loading...',
callback: upFn // Pull-up to execute the function }
}
});
Note: Adding onclick to get the element is not possible, you need to add addEventListener to customize the event
If you don’t understand this integration, you can first learn how to separate the pull-up loading and pull-down refresh. Read:
Simple implementation of Javascript pull-down refresh
Pure JavaScript implements simple pull-down refresh function