Pull-down refresh and pull-up load are two independent and closely related functions. Pull-up load requires server side pagination, while pull-down refresh not only retrieves information but also initializes the previous state and page number.

One at a time.

Server-side paging

If you’re familiar with Yii2, you’ll know that the activeDataProvider itself comes with paging, with 20 data pages per page by default.

Let’s revisit the return from GET/XCX/Albums

header

Yes, in the header of the response, you must have found the above four pieces of data. These are the four pieces of data that yii2 already tells us the current page number, the number of pages, the amount of data per page, and the number of pieces of data.

OMG, isn’t that what we want? ~ ~ ~ ~

Ok, that’s easy, we just need to add the page parameter to the interface to tell us which page to request.

The small program end

Now that we know that the background can return data by page number, the next step is the small program, for mobile applications generally not directly show the page number and click, more as we slide down the screen gradually appear new content, the so-called pull-up loading. There is also a drop-down refresh, which is explained in the last part of this chapter.

About pull-up loading

Pull-up loading makes use of JS’s onReachBottom function, which represents “the handler of the pull-down event on the page”, at which point we fetch new data from the background and add it to the bottom of the existing page.

First, I need to define a variable (page) in the applet page to represent the page to fetch, and then define a function to fetch background data, remember that this fetch takes page parameters.

For this reason, I created an independent function for information acquisition, as shown in the figure below

First load

I don’t know if you can see this, but inside the onReady function we’re loading the data for the first time. Of course, maybe you’re more interested in N+1 loads, so let’s implement that, and launch the onReachBottom function.

Imagine that after we get the first page, the page goes down to the bottom and we need to get the second page. Now the page parameter should be 2. To do this, we need to perform a minor operation on the loadList.

  • Assignment to page
  • Consolidation of existing data with new data

Take a look at the transformation below

The operation time

Loop as you fetch data from the background, then add it to the existing data array, as shown in the code in the green box above. After merging the data, execute page++ for next use.

Each time the page is at the bottom, an onReachBottom function is performed, which executes the loadList.

So every time you go to the bottom you ask for data

The question comes ？？？？？ Yes, the first question is when the page is the size, according to the above logic will continue to increase, and then fetch data, this is obviously a logical error, we should tell the small program how many pages there are, when the number of pages reached the number of pages no longer fetch data.

To do this, we add a new variable hadLastPage = false, which by default means that we have not reached the last page, and then continue to modify the loadList, where yii2 gives us the data in the response header, as shown in the figure below

Another operation

If the current page is already equal to the total number of pages indicating the last page, set hadLastPage= current page, otherwise page++

If hadLastPage is not false when calling this function, it will directly prompt to the end, and will not go to the background to obtain data.

alt

About the pull-down refresh

The applet has some support for pull-down refresh, which is the enablePullDownRefresh parameter in the JSON file when you set enablePullDownRefresh as follows

See the dropdown

In addition, enablePullDownRefresh=true triggers the onPullDownRefresh function in the JS file, where you can do things like initialize the page, clear the data list, and so on.

alt

Now that we’ve done the pull-up loading of the data, we’ll start writing the onPullDownRefresh function in detail.

alt

A series of initializations, remember the last one wx.stopPulldownRefresh (); Pull down to close, otherwise those dots will not disappear.

Tip: The style of the pull-down refresh can also be changed to some extent with backgroundColor and backgroundTextStyle, for example you can make a pull-down with a brown background and bright dots.

conclusion

The above is the pull-down refresh and pull-up load, this is just one of the ideas, smart you will have more interesting implementation, can leave a message to let me see this post.

In the next article we will implement creating and editing albums. You will also learn how to use the form function of the applet.

In addition, the code has been synchronized to github, welcome to download synchronous learning github.com/abei2017/xg…