微信小程序实现上拉分页加载数据

微信小程序的上拉和下拉刷新是比较常见的功能，下拉刷新比较容易实现，这里说一下上拉刷新

1. 实现上拉请求

（1）app.json文件中

"window": {
	"enablePullDownRefresh": true,
}

（2）当前页面的 .json 文件中

{
	"enablePullDownRefresh": true,
}

（3）上拉刷新的钩子函数在自动生成的 .js 文件中有，调用数据请求函数

onReachBottom: function() {
  // 数据请求
  this.getData()
},

​ 调用数据请求之后，滚动页面无法出现重新加载数据的效果，需要页面高度大于屏幕的高度，也就是要页面内容足够长，能够实现滚动。

2. 实现分页加载

​ 请求实现之后，只是重新加载数据，要对云函数进行修改

return await db.collection(...).where({...}).skip(pagenum).limit(8).get()

​ 其他方法按需要进行补充，主要是要有skip()和limit()，这里的pagenum是请求跳过的条数，8是单次限制条数，可以自行定义

​ 钩子函数中，对pagenum进行定义，使它和页面已经加载的数据的数量一致

onReachBottom: function() {
    var pagenum = this.data.taskList.length // taskList为数组，数据的数量即为length
	this.getData(pagenum)
},

对getData() 进行修改，增加pagenum参数，并发送到云函数

getData(pagenum=0){...}

3. 数据全部加载完成后阻止上拉刷新

在上拉刷新钩子函数中增加判断条件，放在调用getData()前面

if (pagenum % 8 !== 0) {
	return
}

4. 容易发送上拉刷新失败问题

（1）原有的钩子函数没有删除，又在前面自行一个，导致被覆盖

（2）页面长度不够，无法触发上拉刷新