Skip to content

下拉刷新 ​

页面 JSON 根上打开开关,引擎负责转圈,并调用页面事件 onPullDownRefresh。列表怎么请求、怎么 setData,写在这个事件里。不会再走 onLoad。

右侧预览可在顶部下拉。完整示例在 Pro「示例」→「能力 → 下拉刷新」。

先看效果 ​

打开下拉 ​

json
{
  "enablePullDownRefresh": true
}

写在 page.json 根上,和 title / body 同级。未写或 false 时,下拉不会转圈,也不会回调事件。

参数类型说明
enablePullDownRefreshBoolean是否打开整页下拉。不是组件

页面事件 ​

时机方法
用户在顶部下拉并松开onPullDownRefresh()
停转圈this.stopPullDownRefresh()
javascript
Page({
  onLoad() {
    this.loadLogs(false);
  },
  onPullDownRefresh() {
    this.loadLogs(true);
    this.stopPullDownRefresh();
  },
  loadLogs(fromPull) {
    // 请求接口 / 读本地,然后 this.setData(...)
  }
});
要点说明
第一次进页仍走 onLoad,自己拉第一份数据
用户下拉只走 onPullDownRefresh,不要在引擎里重入 onLoad
转圈何时停拉完数据后调用 this.stopPullDownRefresh()。没写这个事件时,引擎会自己停

其它滚动、点击见 页面事件。生命周期见 页面生命周期。