背景需求

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();
            }
          });
        }
      } 
  }