东莞建工集团企业网站_购买网站空间自己怎样建立网站_软文代写接单平台_站长工具免费

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

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

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]，如下所示：

  

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