Mui carries out app hybrid development to realize pull-down refresh and pull-up loading

First of all, our environment is to use hbuilder to develop app through Mui. This hybrid development is suitable for Android and apple platforms. The code we wrote this time is to separate pull-up loading and pull-down refresh, and learn together.

In order to realize the pull-down refresh function, most H5 frameworks simulate the pull-down rebound animation through Div. on low-end Android phones, div animation often has a stuck phenomenon (especially the picture and text list); Solve the drag fluency problem of div through double WebView; When dragging, you are not dragging a div, but a complete WebView (sub WebView). The rebound animation uses the native animation; On the IOS platform, the animation of H5 has been relatively smooth, so the H5 scheme is still used. Although there are differences between the two platforms, after encapsulation, a set of code can be used to realize pull-down refresh.

Step 1: create a sub page, because what you drag is actually the whole sub page

Step 2: the content page should be constructed according to the following DOM structure

Step 3: refresh various parameters through the pullrefresh parameter configuration drop-down in the mui.init method

Step 4: set the execution function

The above is the Mui writing method of pull-down refresh and related function functions. Let's take a look at pull-down loading:

The first and second steps are the same as the drop-down refresh

Step 3: refresh various parameters through the pullrefresh parameter configuration drop-down in the mui.init method

Step 4: set the execution function

The above is the detailed writing method and function of the pull-up load code.

This time, we will share the pull-down refresh and pull-up load separately. If you don't understand anything, you can leave a message and discuss it in the message place below.