小程序API —— 56页面处理函数 - 下拉刷新

然后就去远行吧2025-03-30 16:12

下拉刷新时小程序中常见的一种刷新方式，当用户下拉页面的时候，页面会自动刷新，以便用户获取最新的内容；

小程序中实现下拉刷新的方式：

在 app.json 或者 page.json 中开启允许下拉，同时可以配置窗口、loading 样式等；
在页面.js 中定义 onPullDownRefresh 事件监听用户下拉刷新；

下面打开微信开发者工具来配置一下下拉刷新功能：

在 pages/cate/cate.json 中配置允许下拉：
yaml 复制代码
```
{
  "usingComponents": {},
  "onReachBottomDistance": 100,
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "light" 
}
```
点击编译，下拉页面，可以看到页面允许下拉，下拉窗口背景颜色为 #efefef，下拉窗口 loading 颜色为 light，如下：
在 pages/cate/cate.js 中定义一个下拉刷新事件处理函数，如下所示：
javascript 复制代码
```
  // 监听用户下拉刷新
  onPullDownRefresh(){
    console.log("监听用户下拉刷新")
  }
})
```
点击编译，下拉页面，可以看到 Console 区域打印了对应的信息，如下所示：

结合上一节（小程序API ------ 55页面处理函数 -上拉加载）内容，实现下面的需求：当用户上拉加载更多以后，如果用户进行下拉刷新，需要将数据重置：

在 pages/cate/cate.js 中添加对应的刷新逻辑，如下所示：

javascript 复制代码

  // 监听用户下拉刷新
  onPullDownRefresh(){
    // console.log("监听用户下拉刷新")

    // 当用户上拉加载更多以后，如果用户进行了下拉刷新，需要将数据进行重置
    this.setData({
      numList: [1, 2, 3]
    })

    // 下拉刷新以后，loading 效果有可能不会弹回去
    if(this.data.numList.length === 3){
      wx.stopPullDownRefresh()
    }
  }

点击编译，先下拉页面更新当前展示数据，然后刷新页面，可以看到当前数字重新变为 $1, 2, 3$ ，如下所示：

参考视频：尚硅谷微信小程序开发教程