微信小程序下拉刷新

更新日期: 2020-07-25 阅读次数: 2506 字数: 334 分类: 微信小程序

在微信小程序的一些统计页面,例如,查看用户量、浏览量等运营数据,很多时候,我希望能够不时地刷新一下,看看数据有没有变动。所以,比较好的体验是,在页面内提供下拉刷新功能。

page json 设置

增加配置项

"enablePullDownRefresh": true

用于开启当前页面下拉刷新功能支持。默认是 false。

参考: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html#%E9%85%8D%E7%BD%AE%E9%A1%B9

onPullDownRefresh 监听下拉事件

逻辑:

  1. 重置要展示的数据
  2. 重新调用接口拉取数据
  3. (重要)在拉取完数据之后,务必主动调用 wx.stopPullDownRefresh 来终止下拉效果。否则会一直除以下拉悬空状态。

参考: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh

效果演示

扫描下方小程序码,查看效果

微信小程序下拉刷新

程序触发

可以使用 wx.startPullDownRefresh 来主动触发下拉事件。

加载动画不显示

我看微信数据统计小助手在下拉刷新时,会显示三个点一闪一闪的,但是我的就没有。本以为需要手动添加 loading 组件来实现,后来发现只需要在 json 文件中添加配置即可。之前不显示可能是文本的颜色问题。

"backgroundColor": "#fff",
"backgroundTextStyle": "dark",

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式