微信小程序 上拉加载

背景需求

OA系统中，领导要对员工的的申请进行审批，如此多的员工，不可能一下子都显示出来，需要后台进行分页，每次上拉触底加载一页，每次上拉触底加载一页。

注：因为各方面原因，不能上传源代码，只提供思路和伪代码

伪代码（Javascript）

data: {
	// 是否有待审批数据和已审批数据
	pending_noData:false,
	approved_noData: false,
	// 默认显示第几个菜单导航 pending是待领导审批的，approved是领导已审批的
    currentTab: 'pending',
    // 每一页显示多少条数据
    pageSize: 5,
    // 领导待审批列表、待审批的总页数和当前页数
    pendingList: [],
    pendingPageNumber: 1,
    pendingTotalPage: 100,
    // 领导已审批列表、已审批的当前页和总页数
    approvedList: [],
    approvedPageNumber: 1,
    approvedTotalPage: 100,
},
onLoad: function (options) {
	// 1、从后台获取数据，给两个列表、两个列表总页数赋值、并设置当前页数为1 
},
onReachBottom: function () {
	// 1、如果选择了pending栏
		// 1.1 当前页数=当前页数+1
		// 1.2 如果当前页数小于等于总页数（因为先加1了），向后台发起请求新一页的数据
		// 1.3 将新数据push到pendingList数组中
	// 2、如果选择了approved栏
		// 2.1 当前页数=当前页数+1
		// 2.2 如果当前页数小于等于总页数（因为先加1了），向后台发起请求新一页的数据
		// 3.3 将新数据push到approvedList数组中
}

核心代码（Javascript）

init: function () {
    let that = this;
    if (that.data.pendingList == undefined || that.data.pendingList.length == 0) {
      util.showLoading("正在加载");
    }

    this.setData({
      pendingPageNumber: 1,
      approvedPageNumber: 1,
      clickSearch: false
    });

    // 待我审批的-URL
    wx.request({
      url: defaultApprovingURL,
      data: {
        nowPage: 1,
        pageSize: that.data.pageSize,
        openId: wx.getStorageSync('openId')
      },
      method: "GET",
      success: function (res) {
        that.setData({
          pending_noData: res.data.data.list.length === 0,
          pendingList: res.data.data.list || [],
          pendingTotalPage: Math.ceil(parseInt(res.data.data.pagesize) / parseInt(that.data.pageSize)),
          pendingNumber: res.data.data.pagesize
        });
        wx.hideLoading();
      },
      fail: function (res) {
        console.log("获取待审批列表--fail");
      }
    });

    // 我已审批的-URL
    wx.request({
      url: defaultApprovedURL,
      data: {
        nowPage: 1,
        pageSize: that.data.pageSize,
        openId: wx.getStorageSync('openId')
      },
      method: "GET",
      success: function (res) {
        that.setData({
          approved_noData: res.data.data.list.length === 0,
          approvedList: res.data.data.list || [],
          approvedTotalPage: Math.ceil(parseInt(res.data.data.pagesize) / parseInt(that.data.pageSize)),
          approvedNumber: res.data.data.pagesize,
        });
      },
      fail: function (res) {
        console.log("获取已审批列表--fail");
        util.showError(that, '网络错误,请稍后重试');
      }
    });
},
onLoad: function () {
	this.init();
},
onReachBottom: function () {
    let that = this;
    let currentTab = that.data.currentTab;
    if (currentTab == "pending") {
        let pendingPageNumber= that.data.pendingPageNumber+ 1;
        if (pendingPageNumber<= that.data.pendingTotalPage) {
          that.setData({
            pendingPageNumber: pendingPageNumber
          });
          wx.showLoading({
            title: "加载中"
          });
          wx.request({
            url: defaultApprovingURL,
            data: {
              nowPage: that.data.pendingPageNumber,
              pageSize: that.data.pageSize,
              openId: wx.getStorageSync('openId')
            },
            method: "GET",
            success: function (res) {
              wx.hideLoading();
              that.setData({
                pendingList: that.data.pendingList.concat(res.data.data.list)
              });
            },
            fail: function (res) {
              wx.hideLoading();
            }
          });
        }
    } else if (currentTab == "approved") {
        let approvedPageNumber = that.data.approvedPageNumber + 1;
        let approvedTotalPage = that.data.approvedTotalPage;
        if (approvedPageNumber <= approvedTotalPage) {
          that.setData({
            approvedPageNumber: approvedPageNumber
          });
          wx.showLoading({
            title: "加载中"
          });
          let data = {};
          data.nowPage = that.data.approvedPageNumber;
          data.pageSize = that.data.pageSize;
          data.openId = wx.getStorageSync('openId');
          wx.request({
            url: defaultApprovedURL,
            data: data,
            method: "GET",
            success: function (res) {
              wx.hideLoading();
              that.setData({
                approvedList: that.data.approvedList.concat(res.data.data.list)
              });
            },
            fail: function (res) {
              wx.hideLoading();
            }
          });
        }
      } 
  }