下拉刷新
页面 JSON 根上打开开关,引擎负责转圈,并调用页面事件 onPullDownRefresh。列表怎么请求、怎么 setData,写在这个事件里。不会再走 onLoad。
右侧预览可在顶部下拉。完整示例在 Pro「示例」→「能力 → 下拉刷新」。
先看效果
打开下拉
json
{
"enablePullDownRefresh": true
}写在 page.json 根上,和 title / body 同级。未写或 false 时,下拉不会转圈,也不会回调事件。
| 参数 | 类型 | 说明 |
|---|---|---|
| enablePullDownRefresh | Boolean | 是否打开整页下拉。不是组件 |
页面事件
| 时机 | 方法 |
|---|---|
| 用户在顶部下拉并松开 | onPullDownRefresh() |
| 停转圈 | this.stopPullDownRefresh() |
javascript
Page({
onLoad() {
this.loadLogs(false);
},
onPullDownRefresh() {
this.loadLogs(true);
this.stopPullDownRefresh();
},
loadLogs(fromPull) {
// 请求接口 / 读本地,然后 this.setData(...)
}
});| 要点 | 说明 |
|---|---|
| 第一次进页 | 仍走 onLoad,自己拉第一份数据 |
| 用户下拉 | 只走 onPullDownRefresh,不要在引擎里重入 onLoad |
| 转圈何时停 | 拉完数据后调用 this.stopPullDownRefresh()。没写这个事件时,引擎会自己停 |
