微信小程序下拉刷新

更新日期: 2020-07-25 阅读次数: 216 字数: 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",

爱评论不评论

近期节日

2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
2020年09月02日 中元节
2020年09月03日 抗日胜利纪念日
2020年09月07日 白露
2020年09月08日 国际扫盲日
2020年09月10日 教师节
2020年09月16日 国际臭氧层保护日
2020年09月16日 世界清洁地球日
2020年09月18日 "九一八"事变纪念日
2020年09月20日 国际爱牙日
查看更多节日