This method uses the onPullDownRefresh and onReachBottom methods of the page event handler function to realize the pull-down refresh and bottom append of the small program.

Prerequisites:

You need to enable enablePullDownRefresh in the window option of app.json or in the page configuration.

attribute type describe
enablePullDownRefresh Boolean For details about whether to enable the drop-down refresh function, see related event handlers on the page. 
{"enablePullDownRefresh": true}Copy the code

Understand 2 functions:

methods type describe
onPullDownRefresh() function Page-specific event handlers – listen for user pull actions

Wx. stopPullDownRefresh stops the pull-down refresh of the current page after the data refresh is processed
onReachBottom() function Pull the handler that triggers the bottom event on the page

You can set the trigger distance onReachBottomDistance in the App. json window option or in the page configuration
Let’s see what it looks like, and I’m sure you already know how it’s triggered

Let’s get this straight:

To do this, realize that in applets, the content on the page is driven by data, soCopy the code

A, the data

  1. You can do it yourself in Page({simulated data})

  2. Cloud development => database => Create a new collection => Add records => Add any key-value pair you like

  3. Use the interface to get the data (not specified here)

    I’m going to choose 2 here

Second, the page

As mentioned above, data-driven pages, let’s see what the page looks like 😁

// there are some strange tags here, it doesn't matter, <van-cell-group> <block wx:for="{{tasks}}" wx:key="index"> <navigator URL =".. /todoInfo/todoInfo? id={{item._id}}"> <van-cell title="{{item.title}}" /> </navigator> </block> </van-cell-group>Copy the code
Js const db = wx.cloud.database() // Create a database instance const todos = db.collection("todos" The set of "todos" Page ({/ * initial data of the Page * / data: {tasks: [], the skip: 0},})Copy the code

Copy code and see here is there any question?

Tasks is a [] and it is empty. How does it look like this?

What’s skip?

Why hasn’t the todos we got come up yet? It’s essentially an object {} with a bunch of keys and values in curly braces

Keep them in mind and I’ll explain to you later.

Look! There's nothing complicated here, just loop through tasks with wx:for"{{tasks}}" and render to <van-cell title="{{item.title}}"/ >. It's going to appear one by one in the view.Copy the code

If you know anything about Vue or applets, you will understand what this code is saying.

Third, how to realize inquiry?

Pull down refresh and bottom append content

Const db = wx.cloud.database() const todos = db.collection("todos") // A bunch of code is a headache for anyone, so follow my comments ~ tasks: [], skip: 0}, /**** page-related event handlers -- listen to the user pull down to ****/ onPullDownRefresh: Function () {this.getData(res => {// this is just a call to a method then comment down to see what it is wx.stopPulldownRefresh () // reset skip and Tasks to their initial state. This.data. skip = 0 this.data.tasks = []})}, /**** ****/ onReachBottom: Function () {function () {function () {function () {function () {function () {function () {function () {function () {function () {function () { / * * * * * * * * * * * * * * * * * * * * * * * getData is my custom function * * * * * * * * * * * * * * * * * * * * * * * / getData: function (the callback) {if (! callback) { callback = res => {} } wx.showLoading({ title: 'trying to load... ',}) // Here's the important part // Note that todos we already have it // The following line of code tells us that to get data from Todos, it skips the this.data.skip bar each time, passing it through setData() each time, Change the value of tasks to the concatenated value of oldData and res.data. Skip +20 for this.data.skip+20 for success. // Then you can look at the above code. They all execute getData when the condition is triggered. Todos.skip (this.data.skip).get().then(res => {// skip(this.data.skip).get().then(res => {// skip(this.data.skip).get() This.data. tasks this.setData({// Concatenate the skipped data with the newly loaded data and render the page tasks: Olddata. concat(res.data)}, res => {this.data. Skip += 20 wx.hideloading ({success: (res) => {}, }) callback() }) }) },Copy the code

** Start rendering 20, which is the common value of the applet convention **** added 12 items after all, because there are only 32 items in Todos

Click to learn about 👉skip()

To summarize

  1. Skip (), skip the loaded data,

  2. Each bottom concatenates the loaded data with the data to be loaded next and assigns values to the data to be rendered.

  3. Reset data and reload the page with each refresh.