openharmony container component Refresh

Refresh: pull-down refresh container
Refresh(value: {refreshing: boolean, offset?: Length, friction?: number})
refreshing : whether the current component is refreshing
offset : the distance from the top of the parent component when the refreshing component is at rest (default 16)
friction : Pull-down friction coefficient, the value range is 0 to 100 (default 62).
        0 means that the pull-down refresh container does not follow the pull-down gesture, and
        100 means the pull-down refresh container closely follows the pull-down gesture
        . The larger the pull-down value, the more responsive the pull-down refresh container will follow the pull-down gesture. The more sensitive
the event:
onStateChange(callback: (state: RefreshStatus) => void) The callback is triggered when the current refresh status changes.
    state: Refresh state
        Inactive: The default is not the pull-down state
        Drag: During the pull-down, the pull-down distance is less than the refresh distance
        OverDrag: During the pull-down, the pull-down distance exceeds the refresh distance
        Refresh: The pull-down ends, rebounds to the refresh distance, enters the refresh state
        Done: Refresh ends, returns Initial state (top)
onRefreshing(callback: () => void) triggers a callback when entering the refresh state

The effect is as shown in the figure:

 Code:

@Entry
@Component
struct RefreshPage {
  @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.toString())
      }).onRefreshing(() => {
        setTimeout(() => {
          this.counter++
          this.isRefreshing = false
        }, 1000)
        console.log('onRefreshing test')
      })

    }
    .width('100%')
    .height('100%')
  }
}