1. Preface

One of the most commonly used functions of applet paging and pull-down refresh is not very difficult to implement. I use a pseudo code method to implement it. The main idea is this idea

2. implementation

// pages/zhibo/zhibo.js
var app = getApp();
var wechatUtil = require('../../utils/wechatRequest.js');
var apiUtil = require('../../utils/apiRequest.js');

var liveroom = require('../../utils/liveroom.js');
var getlogininfo = require('../../getlogininfo.js');

Page({

  /**
   * Initial data of the page
   */
  data: {
    user: app.globalData.user,
    userInfo: app.globalData.userInfo,
    pageNumber:1,
    pageSize:5,
    roomList:[],

  },


    /**
    *Loading function
    */
  onLoad: function () {
    var that = this;
    //Call the method to load data
    that.loadRooms();

  },

  /**
     * Life cycle function -- listen to the completion of the first rendering of the page
     */
  onReady: function () {

  },


  /**
   * Load Live Room
   */
  loadRooms:function(res){
    var that = this;


    //Get paging information
    var pageNumber = that.data.pageNumber;
    var pageSize = that.data.pageSize;

    //Send request
    wechatUtil.req(url,{
      "pageNumber":pageNumber,
      "pageSize":pageSize
    },function(res){
      if(res.resultCode == 200){
        //Return to success
        var roomList = that.data.roomList;
        var reqRooms = res.resultContent;

        //If the returned data is empty, prompt
        if(reqRooms.length == 0){
          wx.showToast({
            title: "No more data...",
            icon: 'fail',
            duration: 1000
          });

          //Paging failed, paging data minus 1
          if(pageNumber > 1){
            that.setData({
              pageNumber:--pageNumber
            });
          }
          return;
        }

        //If the paging data is not empty, append the new paging data to the original data IQ
        that.setData({
          roomList: roomList.concat(reqRooms)
        });

      }else{

        //Prompt if data loading fails
        wx.showToast({
          title: "Failed to load data",
          icon: 'fail',
          duration: 1000
        });

        //Paging failed, paging data fallback
        if (pageNumber > 1) {
          that.setData({
            pageNumber: --pageNumber
          });
        }
      }
      console.log(res);
    })

  },

  /**
   * Pull up paging
   */
  onReachBottom: function () {

    //Pull up pagination, add 1 to page number, and then call paging function loadRoom().
    var that = this;
    var pageNumber = that.data.pageNumber;
    that.setData({
      pageNumber:++pageNumber
    });

    setTimeout(function () {
      wx.showToast({
        title: 'Loading..',
      }),
      that.loadRooms();
      that.setData({
        title: "Data loading completed"
      })
    }, 1000)
  },

/**
 * Page related event processing function -- listening to user pull-down action
 * Drop-down refresh
 */
  onPullDownRefresh: function () {
    var that = this;
    //Pull down to refresh, set pageNumber and pageSize to 1 and 5 respectively, and initialize the data so that the data can be retrieved through loadRoom()
    that.setData({
      pageNumber: 1,
      pageSize: 5,
      roomList:[]
    })
    that.loadRooms();
    wx.stopPullDownRefresh();
  },

})
wx.setNavigationBarColor({
  frontColor: '#000000',
  backgroundColor: '#DCC690',
})

3. postscript

It's scribbled. It's probably a thought like this:
1. Set paging data, pageNumber and pageSize in data
2. Write the paging function in the background of the request. The most important thing for paging request data is pageNumber, which is obtained from data
If the paging data is obtained, the paging data + 1, and the resulting data is appended to the original data
If no paging data is obtained, paging data - 1
3. if the dropdown is pagination, the main logic is paging data +1, and then the paging function is called to get data.
4. If you pull up to refresh, the paging data will be reset and the data will also be reset
This is the way of thinking
see you!