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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.