ArkTS的List组件如何实现下拉刷新效果？

@State show: boolean = false
@State isRefreshing: boolean = false
@State arr: string[] = []

aboutToAppear(): void {
  for (let index = 0; index < 10; index++) {
    this.arr.push("item" + index)
  }
}

@Builder
customRefreshComponent() {
  Stack() {
    Row() {
      LoadingProgress().height(32)
      Text("正在刷新...").fontSize(16).margin({ left: 20 })
    }
    .alignItems(VerticalAlign.Center)
  }.width("100%").align(Alignment.Center)
  .margin(15)
}

build() {
  Column() {
    Refresh({ refreshing: $$this.isRefreshing, builder: this.customRefreshComponent() }) {
      List() {
        ForEach(this.arr, (item: string) => {
          ListItem() {
            Text('' + item)
              .width('96%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(Color.White)
              .margin({top:10})
          }.width("100%")
        }, (item: string) => item)
      }
      .onScrollIndex((first: number) => {
        console.info(first.toString())
      })
      .width('100%')
      .height('100%')
      .divider({
        strokeWidth: 1,
        color: Color.Yellow,
        startMargin: 10,
        endMargin: 10
      })
      .scrollBar(BarState.Off)
    }
    .onStateChange((refreshStatus: RefreshStatus) => {
      console.info('Refresh onStatueChange state is ' + refreshStatus)
    })
    .onRefreshing(() => {
      //模拟网络请求操作
      setTimeout(() => {
        this.isRefreshing = false
      }, 2000)
      console.log('onRefreshing test')
    })
    .backgroundColor(0x89CFF0)
  }
}