小程序学习笔记：判断分页数据边界，优化性能

在小程序开发过程中，数据分页展示是常见的功能需求。但如果处理不当，可能会出现无效的数据请求，影响程序性能。今天咱们就来深入探讨如何在小程序开发里精准判断是否还有下一页数据，并避免发起多余请求。

一、问题引入

假设有 80 条美食数据，每页展示 10 条，理论上 8 页就能展示完。但在实际操作时，你有没有想过，会不会出现请求第 9 页、第 10 页数据这种情况呢？答案是肯定的。就像在开发美食类小程序时，用户不断上拉加载新数据，若没有合理的限制，就会出现超出数据范围的请求。这些多余请求不仅浪费网络资源，还可能拖慢小程序的运行速度，影响用户体验。所以，我们必须找到一种方法来避免这种情况。

二、判断公式解析

在判断是否还有下一页数据时，有个简单又有效的公式：页码值 × 每页显示数据条数 ≥ 总数据条数。当这个公式成立时，就意味着已经没有下一页数据了。用变量表示就是：pageIndex * pageSize >= total，这里pageIndex代表页码值，pageSize是每页显示的条数，total是总数据条数。

案例一：总数据 77 条，每页显示 10 条

这种情况下会分成 8 页展示，最后一页只有 7 条数据。

• 当处于第 7 页，希望加载第 8 页数据时：7 * 10 = 70，70 < 77，公式不成立，所以还有第 8 页数据。
• 当处于第 8 页，希望加载第 9 页数据时：8 * 10 = 80，80 > 77，公式成立，这就表明没有第 9 页数据了。

案例二：总数据 80 条，每页显示 10 条

刚好分成 8 页，且第 8 页有 10 条数据。

• 当处于第 7 页，希望加载第 8 页数据时：7 * 10 = 70，70 < 80，公式不成立，有第 8 页数据。
• 当处于第 8 页，希望加载第 9 页数据时：8 * 10 = 80，80 = 80，公式成立，没有第 9 页数据。

从这两个案例可以看出，这个公式能准确判断是否还有下一页数据。

三、代码实现

在小程序开发里，要应用这个公式，需要定位到上拉加载数据的相关事件，比如enrich bottom对应的事件。在页码值加 1 之前进行判断。假设使用微信小程序开发，代码示例如下：

Page({
  data: {
    pageIndex: 1, // 当前页码
    pageSize: 10, // 每页显示数据条数
    total: 80, // 总数据条数
    dataList: [] // 存储数据的数组
  },
  onReachBottom: function() {
    // 判断是否还有下一页数据
    if (this.data.pageIndex * this.data.pageSize >= this.data.total) {
      // 没有下一页数据，提示用户
      wx.showToast({
        title: '数据加载完毕',
        icon: 'none',
        duration: 1500
      });
      return;
    }
    // 有下一页数据，页码值加1，发起数据请求
    this.setData({
      pageIndex: this.data.pageIndex + 1
    });
    // 模拟发起数据请求
    wx.request({
      url: '你的数据请求接口',
      data: {
        page: this.data.pageIndex,
        size: this.data.pageSize
      },
      success: (res) => {
        // 处理返回的数据，添加到dataList
        this.setData({
          dataList: [...this.data.dataList, ...res.data]
        });
      }
    });
  }
});

在上述代码中，onReachBottom是小程序页面触底时触发的函数。在函数内部，先根据公式判断是否还有下一页数据。如果没有，就使用wx.showToast方法弹出提示框告知用户，同时return结束函数，不再执行后续的页码值加 1 和数据请求操作。若有下一页数据，则让页码值加 1，然后发起数据请求获取新数据，并更新页面展示的数据列表。

四、效果演示

完成代码编写并保存后，运行小程序。初始时会加载第一页数据，切换到小程序开发者工具的network面板，可以查看数据请求情况。不断上拉页面加载新数据，当加载到最后一页时，再次上拉，此时可以看到不再发起新的数据请求，同时页面弹出 “数据加载完毕” 的提示框。这就说明我们成功实现了对下一页数据的判断和多余请求的避免。