当前位置：首页 > article >正文

小程序API —— 55页面处理函数 -上拉加载

article 2025/4/1 22:38:15

上拉加载是小程序中常见的一种加载方式，当用户滑动页面到底部时，会自动加载更多的内容，以便用户继续浏览；

小程序中实现上拉加载的方式：

在 app.json 或者 page.json 中配置距离页面底部的距离：onReachBottonDistance；默认取 50px；
在页面.js 中定义· onReachBottom 事件监听用户上拉加载；

下面我们使用微信开发者工具来演示一下上拉加载功能：

在 pages/cate/cate.json 文件中配置 onReachBottonDistance 参数值，这里设置为 100px，表示具体底部为 100px 时触发上拉加载函数，如下：
```
{
  "usingComponents": {},
  "onReachBottomDistance": 100
}
```
在 pages/cate/cate.scss 文件中配置页面高度为 1000 px，用于显示上拉效果，如下：
```
page {
  height: 1000px;
}
```

在 pages/cate/cate.js 文件中定义 onReachBottom 事件监听用户上拉加载，如下：

Page({
  // 监听用户上拉加载
  onReachBottom(){
    console.log("监听用户上拉加载");
  }
})

点击编辑，可以看到页面右侧有一个滚动条，上拉页面，当距离 page 底部还有 100px 的时候，触发 js 文件中定义的 onReachBottom 事件，可以看到在 Console 中输出了 console 打印的信息，如下：

接着使用微信开发者工具实现一个需求：当页面上拉加载时，页面当前显示的数字不断变大；

在 pages/cate/cate.wxml 中添加初始页面布局，如下：

<view wx:for="{{ numList }}" wx:key="*this" class="{{ ((index + 1) % 2 === 0) ? 'even' : 'odd' }}">
  {{ item }}
</view>

在 pages/cate/cate.scss中添加样式调整，设置 view 的高度，使用 flex 流式布局，同时对奇数和偶数设置不同的背景颜色，如下：

view {
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.odd {
  background-color: lightskyblue;
}

.even {
  background-color: lightsalmon;
}

在 pages/cate/cate.js 中实现具体的逻辑，当滑动到页面底部时，给 numList 数据增加新值，使其不断变大，如下：

Page({

  data: {
    numList: [1, 2, 3]
  },

  // 监听用户上拉加载
  onReachBottom(){
    
    wx.showLoading({
      title: '数据加载中',
    })

    // 当上拉时，需要数字进行累加
    // 使用 setTimeout 模拟服务器请求（需要等待数据发送接收）
    setTimeout(()=>{
      // 获取数组最后一项
      const lastNum = this.data.numList[this.data.numList.length - 1];
      // 定义需要追加的元素
      const newArr = [lastNum + 1, lastNum + 2, lastNum + 3];

      // 更新数据
      this.setData({
        numList: [...this.data.numList, ...newArr]
      })
      wx.hideLoading()
    }, 1500)
  }
})