下拉刷新

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

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

先看效果

{
  "enablePullDownRefresh": true,
  "title": {
    "text": "下拉刷新",
    "fontSize": 18,
    "color": "#FFFFFF",
    "background": "#006A65"
  },
  "style": {
    "background": "#F5F5F5",
    "padding": 12
  },
  "body": [
    {
      "type": "notice",
      "text": "在顶部下拉。引擎只回调 onPullDownRefresh，不会再走 onLoad。数据在 loadLogs 里自己拉。"
    },
    {
      "type": "space",
      "height": 8
    },
    {
      "type": "grid",
      "bind": "metrics",
      "columns": 2,
      "item": {
        "type": "card",
        "style": {
          "padding": 12,
          "gap": 4
        },
        "children": [
          {
            "type": "notice",
            "text": "{{item.label}}"
          },
          {
            "type": "title",
            "text": "{{item.value}}",
            "style": {
              "color": "#006A65"
            }
          }
        ]
      }
    },
    {
      "type": "text",
      "text": "最近记录",
      "style": {
        "fontWeight": "bold"
      }
    },
    {
      "type": "list",
      "bind": "logs",
      "item": {
        "type": "card",
        "children": [
          {
            "type": "row",
            "style": {
              "gap": 8
            },
            "children": [
              {
                "type": "text",
                "text": "{{item.title}}",
                "style": {
                  "weight": 1,
                  "fontWeight": "bold"
                }
              },
              {
                "type": "tag",
                "text": "{{item.status}}",
                "style": {
                  "background": "#E6F4F1",
                  "color": "#006A65"
                }
              }
            ]
          },
          {
            "type": "notice",
            "text": "{{item.time}}"
          }
        ]
      }
    }
  ]
}

UI

9:41100%

下拉刷新

在顶部下拉。引擎只回调 onPullDownRefresh，不会再走 onLoad。数据在 loadLogs 里自己拉。

刷新次数

0

最近时间

--

最近记录

暂无数据

打开下拉

{
  "enablePullDownRefresh": true
}

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

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

页面事件

时机	方法
用户在顶部下拉并松开	onPullDownRefresh()
停转圈	this.stopPullDownRefresh()

Page({
  onLoad() {
    this.loadLogs(false);
  },
  onPullDownRefresh() {
    this.loadLogs(true);
    this.stopPullDownRefresh();
  },
  loadLogs(fromPull) {
    // 请求接口 / 读本地，然后 this.setData(...)
  }
});

要点	说明
第一次进页	仍走 onLoad，自己拉第一份数据
用户下拉	只走 onPullDownRefresh，不要在引擎里重入 onLoad
转圈何时停	拉完数据后调用 this.stopPullDownRefresh()。没写这个事件时，引擎会自己停

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