HarmonyOS List回弹问题

demo如下：

@Builder
export function ListRefreshLoadBuilder(name: string, param: Object) {
  ListRefreshLoad()
}
@Component
struct ListRefreshLoad {
  @State arr: Array<number> = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  @State refreshing: boolean = false;
  @State refreshOffset: number = 0;
  @State refreshState: RefreshStatus = RefreshStatus.Inactive;
  @State canLoad: boolean = false;
  @State isLoading: boolean = false;
  @Builder
  refreshBuilder() {
    Stack({ alignContent: Alignment.Bottom }) {
      // can use the refresh state to decide whether the progress component is exist or not.
      // in this case, the component is not exist otherwise in the pull down or refresh state
      if (this.refreshState != RefreshStatus.Inactive && this.refreshState != RefreshStatus.Done) {
        Progress({ value: this.refreshOffset, total: 64, type: ProgressType.Ring })
          .width(32).height(32)
          .style({ status: this.refreshing ? ProgressStatus.LOADING : ProgressStatus.PROGRESSING })
          .margin(10)
      }
    }.height("100%").width("100%")
  }
  @Builder
  footer() {
    Row() {
      LoadingProgress().height(32).width(48)
      Text("加载中")
    }.width("100%")
    .height(64)
    .justifyContent(FlexAlign.Center)
    // hidden this component when don't need to load
    .visibility(this.isLoading ? Visibility.Visible : Visibility.Hidden)
  }
  build() {
    NavDestination() {
      Refresh({ refreshing: $$this.refreshing, builder: this.refreshBuilder() }) {
        List() {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text('' + item)
                .width('100%')
                .height(80)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .backgroundColor(0xFFFFFF)
            }.borderWidth(1)
          }, (item: string) => item)

          ListItem() {
            this.footer();
          }
        }
        .onScrollIndex((start: number, end: number) => {
          // when reach the end of list, trigger data load
          if (this.canLoad && end >= this.arr.length - 1) {
            this.canLoad = false;
            this.isLoading = true;
            // simulate trigger data load
            setTimeout(() => {
              for (let i = 0; i < 10; i++) {
                this.arr.push(this.arr.length);
                this.isLoading = false;
              }
            }, 700)
          }
        })
        .onScrollFrameBegin((offset: number, state: ScrollState) => {
          // loading can be triggered only when swipe up
          if (offset > 5 && !this.isLoading) {
            this.canLoad = true;
          }
          return { offsetRemain: offset };
        })
        .scrollBar(BarState.Off)
        // open the spring back of edge
        .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
      }
      .width('100%')
      .height('100%')
      .backgroundColor(0xDCDCDC)
      .onOffsetChange((offset: number) => {
        this.refreshOffset = offset;
      })
      .onStateChange((state: RefreshStatus) => {
        this.refreshState = state;
      })
      .onRefreshing(() => {
        // simulate refresh the data
        setTimeout(() => {
          this.refreshing = false;
        }, 2000)
      })
    }
  }
}
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.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.