harmony 鸿蒙Refresh

  • 2022-08-09
  • 浏览 (786)

Refresh

The <Refresh> component is a container that provides the pull-to-refresh feature.

NOTE

This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.

When setting a custom component, make sure its height does not exceed 64 vp.

Child Components

This component supports only one child component.

APIs

Refresh(value: { refreshing: boolean, offset?: number|string , friction?: number|string, builder?: Custombuilder})

Parameters

Name Value Type Mandatory Description
refreshing boolean Yes Whether the current component is being refreshed.
This parameter supports $$ for two-way binding of variables.
offset string |number No Distance from the pull-down starting point to the top of the component.
Default value: 16, in vp
NOTE
The value range of offset is [0vp, 64vp]. If the value is greater than 64 vp, the value 64 vp will be used. The value cannot be a percentage or a negative number.
friction number |string No Coefficient of friction, which indicates the component’s sensitivity to the pull-down gesture. The value ranges from 0 to 100.
Default value: 62
- 0 indicates that the <Refresh> component is not sensitive to the pull-down gesture.
- 100 indicates that the <Refresh> component is highly sensitive to the pull-down gesture.
- A larger value indicates a more sensitive response of the <Refresh> component to the pull-down gesture.
builder CustomBuilder10+ No Component with the custom refresh style set for the pull-down gesture.

Attributes

The universal attributes are supported.

Events

In addition to the universal events, the following events are supported.

Name Description
onStateChange(callback: (state: RefreshStatus) => void) Triggered when the refresh status changes.
- state: refresh status.
onRefreshing(callback: () => void) Triggered when the component enters the refresh state.

RefreshStatus

Name Description
Inactive The component is not pulled down. This is the default value.
Drag The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh.
OverDrag The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh.
Refresh The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.
Done The refresh is complete, and the component returns to the initial state (top).

Example

// xxx.ets
@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false
  @State counter: number = 0

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, offset: 120, friction: 100 }) {
        Text('Pull Down and refresh: ' + this.counter)
          .fontSize(30)
          .margin(10)
      }
      .onStateChange((refreshStatus: RefreshStatus) => {
        console.info('Refresh onStatueChange state is ' + refreshStatus)
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.counter++
          this.isRefreshing = false
        }, 1000)
        console.log('onRefreshing test')
      })
    }
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkTS-based Declarative Development Paradigm

harmony 鸿蒙@ohos.multimedia.avCastPicker (AVCastPicker)

harmony 鸿蒙Property Animation

harmony 鸿蒙Enums

harmony 鸿蒙Blank

harmony 鸿蒙Button

harmony 鸿蒙CalendarPicker

harmony 鸿蒙Checkbox

harmony 鸿蒙CheckboxGroup

harmony 鸿蒙DataPanel

0  赞