#<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

Code

预览

#属性

#enable-refresh

// @默认值: 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> 将附着在刷新视口的顶部边缘。

#finishRefresh

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

在 startrefresh 事件之后调用此方法以结束刷新状态，使 <refresh-header> 回弹。

#兼容性