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

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

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

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

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

• 在 pages/cate/cate.json 中配置允许下拉：

  {
    "usingComponents": {},
    "onReachBottomDistance": 100,
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle": "light" 
  }
  

  点击编译，下拉页面，可以看到页面允许下拉，下拉窗口背景颜色为 #efefef，下拉窗口 loading 颜色为 light，如下：
  

• 在 pages/cate/cate.js 中定义一个下拉刷新事件处理函数，如下所示：

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

  点击编译，下拉页面，可以看到 Console 区域打印了对应的信息，如下所示：
  

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

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

    // 监听用户下拉刷新
    onPullDownRefresh(){
      // console.log("监听用户下拉刷新")
  
      // 当用户上拉加载更多以后，如果用户进行了下拉刷新，需要将数据进行重置
      this.setData({
        numList: [1, 2, 3]
      })
  
      // 下拉刷新以后，loading 效果有可能不会弹回去
      if(this.data.numList.length === 3){
        wx.stopPullDownRefresh()
      }
    }
  

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

  

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