First of all, our environment is to use HBuilder to develop APP through MUI. This hybrid development is suitable for both Android and Apple platforms. The code we wrote for you this time is to separate the pull-up loading and pull-down refreshing separately, and let’s learn it together.
In order to realize the pull-down refresh function, most H5 frameworks simulate pull-down rebound animations through DIV. On low-end Android phones, DIV animations often stutter (especially the case of picture and text list); the DIV drag fluency problem is solved through double webviews; when dragging, the dragging is not a div, but a complete webview (sub-webview), and the rebound animation uses native animation; on iOS platform, H5 animations are already relatively smooth, so the H5 solution is still used. Although the implementations of the two platforms are different, they are encapsulated and can be used to achieve pull-down refresh using a set of code.
Step 1: Create a subpage, because what is dragged is actually the whole of a subpage
({
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 top position of the content page needs to be calculated based on the actual page layout. If you use standard Mui navigation, the top default is 48px; ....//Other parameter definitions }
}]
});
Step 2: The content page needs to be constructed according to the following DOM structure
<!--Pull down to refresh the container-->
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--Data list-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">1</li>
</ul>
</div>
</div>
Step 3: Refresh each parameter by pullRefresh parameter configuration in the method
({
pullRefresh : {
container:"#pullrefresh",// Pull down to refresh the container logo, querySelector can all be used for css selectors, such as: id, .class, etc. 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 : fn //Required, refresh the function, and write it according to the specific business, such as obtaining new data from the server through ajax; } }
});
Step 4: Set the execution function
function fn() {
//Business logic code, such as obtaining new data from the server through ajax; ...... //Note that after loading the new data, the following code must be executed. Note: If it is an ajax request, the following code must be placed after processing the ajax response data
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //This line of code will be hidden Loading... Container
}
The above is about the MUI writing method and related function functions for pull-down refresh. Let’s take a look at the drop-down loading:
Step 1, Step 2 is the same as the pull-down refresh
Step 3: Refresh each parameter by pullRefresh parameter configuration in the method
({
pullRefresh : {
container:"#pullrefresh",//The area identifier to be refreshed, the css selector that querySelector can be positioned, such as: id, .class, etc. up : {
contentrefresh : "Loading...",//Optional, when loading, the title content displayed on the loading control is loaded. contentnomore:'No more data',//Optional, reminder content displayed if there is no more data after the request is completed; callback : fn //Required, refresh the function, and write it according to the specific business, such as obtaining new data from the server through ajax; }
}
});
Step 4: Set the execution function
function fn() {
//Business logic code, such as obtaining new data from the server through ajax; ...... //Note that after loading the new data, the following code must be executed. True means that there is no more data. Two things to note： //1. If it is an ajax request, the following code needs to be placed after processing the ajax response data // 2、NoticethisScope of，If anonymous functions exist，Need to bethisUse after copying
var _this = this;
_this.endPullupToRefresh(true|false);
}
The above is the detailed writing method and function of loading this code on the pull-up.
This time we will share with you the drop-down refresh and pull-up loading. If you don’t understand anything, you can leave a message in the message place below to discuss.