微信小程序 上拉加载

### 微信小程序实现上拉加载更多数据功能

在微信小程序中，`onReachBottom` 生命周期函数用于检测页面是否滚动到了底部。当用户滚动至页面最底端时会触发此事件，从而可以用来请求并展示更多数据[^1]。

#### 配置 `onReachBottomDistance`

为了优化用户体验，在距离页面真正触底前就提前触发加载操作，可以在 `json` 文件里设置 `onReachBottomDistance` 参数来定义触发距离。例如：

{
  "usingComponents": {},
  "onReachBottomDistance": 50
}

上述配置表示当页面剩余未显示的内容高度小于等于50px时即触发 `onReachBottom` 函数调用[^2]。

#### JavaScript逻辑处理

下面是一段简化版的JavaScript代码片段，展示了如何利用 `onReachBottom()` 方法获取新一批商品列表项，并更新视图层的数据绑定变量以追加新的条目到现有列表之中。

Page({
  data: {
    goodsList: [], // 存储已有的商品信息数组
    page: 1,       // 当前页码，默认第一页
    hasMoreData: true // 是否还有更多数据可加载标志位
  },

  onLoad() {
    this.fetchGoods();
  },

  onReachBottom() {
    if (!this.data.hasMoreData) return;
    
    console.log('尝试加载下一页');
    this.setData({page: this.data.page + 1});
    this.fetchGoods();
  },

  fetchGoods() {
    wx.request({
      url: 'https://example.com/api/goods', // 请求接口地址
      method: 'GET',
      data: {page: this.data.page},
      success(res){
        const newData = res.data.list || [];
        
        if (newData.length === 0) {
          this.setData({hasMoreData: false});
          return;
        }

        this.setData({
          goodsList: [...this.data.goodsList, ...newData]
        });
      }
    })
  }
})

这段脚本首先初始化了一个空的商品列表以及当前查询起始位置（默认为第一页）。每当页面初次载入或是达到底部时都会发起一次网络请求去服务器端取回指定数量的新记录；如果返回为空，则停止继续尝试加载后续分页内容。