下拉刷新时小程序中常见的一种刷新方式,当用户下拉页面的时候,页面会自动刷新,以便用户获取最新的内容;
小程序中实现下拉刷新的方式:
- 在 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],如下所示:
参考视频:尚硅谷微信小程序开发教程