#<refresh> XElement

<refresh> 元素提供下拉刷新手势，在拉动过程中展示可自定义的头部视图，用于指示正在获取新数据。

当用户下拉超过可配置的阈值时，会触发 refresh 事件。你可以在事件回调中触发异步更新，并在操作完成后自动隐藏头部视图。

#用法

• <refresh> 仅支持垂直方向的下拉刷新手势。
• 它最多接受两个直接子元素：<refresh-header> 和内部包含可垂直滚动内容的 <view>。

#下拉刷新

通过 <refresh-header> 定义刷新效果，并将 <refresh> 的 enable-refresh 设为 true。

1. 触发刷新：向下拖拽或调用 autoStartRefresh，将 <refresh-header> 锁定在顶部并触发 startrefresh 事件。

2. 结束刷新：调用 finishRefresh，以动画方式将 <refresh-header> 移出视野。

refreshsrc/base/index.tsx

预览

#属性

#enable-refresh

// @defaultValue: true
'enable-refresh'?: boolean;

用于控制下拉拖拽或调用 autoStartRefresh 是否能够触发 startrefresh 事件。

#事件

前端可以绑定相应的事件回调来监听元素的运行时行为，如下所示。

#bindheaderoffset

bindheaderoffset = (e: RefreshHeaderOffsetEvent) => {};

当 <refresh-header> 被拉出并处于移动过程中触发。

#bindrefreshstatechange

bindrefreshstatechange = (e: RefreshStateChangeEvent) => {};

当 <refresh-header> 状态发生变化时触发。

#bindstartrefresh

bindstartrefresh = (e: RefreshStartRefreshEvent) => {};

当 enable-refresh 为 true 且下拉拖拽或调用 autoStartRefresh（进入刷新状态）时触发。

#方法

前端可以通过 SelectorQuery API 调用组件方法。

#autoStartRefresh

lynx.createSelectorQuery()
.select('#id')
.invoke({
method: 'autoStartRefresh',
success: function (res) {},
fail: function (res) {},
})
.exec();

当 enable-refresh 为 true 时，调用该方法会将整个 <refresh-header> 拉出并触发 startrefresh 事件；随后 <refresh-header> 会贴合在 refresh 视口的顶部边缘。

#finishRefresh

lynx.createSelectorQuery()
     .select('#id')
     .invoke({
      method: 'finishRefresh',
      success: function (res) {},
      fail: function (res) {},
    })
    .exec();

在 startrefresh 事件之后调用，用于结束刷新状态，使 <refresh-header> 回弹复位。

#兼容性