#Attributes

#enable-refresh

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

Determines if dragging down or calling autoStartRefresh can trigger the startrefresh event.

#Events

Frontend can bind corresponding event callbacks to listen for runtime behaviors of the element, as shown below.

#bindheaderoffset

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

Triggered during movement when <refresh-header> is exposed.

#bindrefreshstatechange

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

Triggered when <refresh-header> state changes.

#bindstartrefresh

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

Triggered when enable-refresh is true, and dragging down or calling autoStartRefresh (enters refresh state).

#Methods

Frontend can invoke component methods via the SelectorQuery API.

#autoStartRefresh

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

When enable-refresh is true, call this method to expose the entire <refresh-header> , triggering the startrefresh event, after which <refresh-header> will attach to the top edge of the refresh's viewport.

#finishRefresh

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

Called after the startrefresh event to end the refresh state, making <refresh-header> rebound.