微信小程序上拉加载

本文主要是介绍微信小程序上拉加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景需求

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});// 待我审批的-URLwx.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");}});// 我已审批的-URLwx.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();}});}} }