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

陈铭生简介江门seo外包公司

wzjs 2025/8/5 9:56:53

陈铭生简介,江门seo外包公司,手机上如何做网站,通过对网站seo操作从而改进下拉刷新时小程序中常见的一种刷新方式，当用户下拉页面的时候，页面会自动刷新，以便用户获取最新的内容； 小程序中实现下拉刷新的方式： 在 app.json 或者 page.json 中开启允许下拉，同时可以配置窗口、loa…

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

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

在 app.json 或者 page.json 中开启允许下拉，同时可以配置窗口、loading 样式等；
在页面.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()}}