微信小程序原生框架实现界面上拉加载和下拉刷新

在移动端开发中，上拉加载和下拉刷新是很常见的功能，可以用它来替代PC端表格分页的功能。今天我们来复盘一下在小程序中实现该功能的思路。

上拉加载

当用户上滑界面时，滚动条触底，开始加载下一页数据，实现思路如下：

1.从文档中查询滚动条触底事件（小程序的页面生命周期事件onReachBottom）
2.判断还有没有下一页数据（总页数 = Math.ceil(总条数 / 页容量) ，判断当前页数是否大于等于总页数）
3.假如没有下一页数据，提示用户
4.有下一页，就加载数据（当前页码++，重新发送请求，对数组进行拼接）

代码实现

1.界面中定义变量，用到的是页大小和总页数

data: {
  // 存放后端请求到的数据
  goodsList: []
},
// 接口需要的参数
QueryParams: {
  query: "",
  cid: "",
  pagenum: 1,   // 页码
  pagesize: 10  // 页大小
},
// 总页数
totalPages: 1

2.计算总页数，并拼接数组，因为每次请求只是请求了一页的数据，显示需要把之前的内容都显示出来

// 获取商品分类列表数据
async getGoodsList() {
  let result = await request({ url: '/goods/search', data:this.QueryParams })
  // 获取总条数
  const total = result.total;
  // 计算总页数
  this.totalPages = Math.ceil(total / this.QueryParams.pagesize)
  this.setData({
    // 拼接数组
    goodsList: [...this.data.goodsList, ...result.goods]
  })
  // 关闭下拉刷新的窗口
  wx.stopPullDownRefresh();
}

3.界面上滑事件，滚动条触底重新加载

// 页面上滑，滚动条触底事件
onReachBottom() {
  // 判断还有没有下一页数据
  if (this.QueryParams.pagenum >= this.totalPages) {
    // 没有下一页数据
    wx.showToast({
      title: '没有下一页数据',
    })
  } else {
    // 还有下一页数据，页码加1
    this.QueryParams.pagenum++;
    // 重新发送请求
    this.getGoodsList()
  }
}

实现效果

下拉刷新

当用户下拉界面时，页面需要刷新，重新请求后端数据，实现思路如下：

1.触发下拉刷新事件（小程序的页面生命周期事件onPullDownRefresh）
2.重置数据数组
3.重置页码，设置为1
4.重新发送请求
5.数据请求回来，需要手动关闭等待效果

代码实现

1.在.json文件中开启下拉刷新，并设置颜色为黑色

"enablePullDownRefresh": true,
"backgroundTextStyle": "dark"

2.触发下拉刷新事件

// 下拉刷新事件
onPullDownRefresh() {
  // 1.重置数组
  this.setData({
    goodsList: []
  })
  // 2.重置页码
  this.QueryParams.pagenum = 1;
  // 3.发送请求
  this.getGoodsList()
}

3.手动关闭等待效果

// 关闭下拉刷新的窗口
wx.stopPullDownRefresh();

实现效果