#鸿蒙通关秘籍#怎样实现 HarmonyOS Next 中触底加载并结合节流功能？

import  LoadingMoreView from '../components/LoadingMoreView';

@Entry
@Component
struct ListPage {
  @State list: number[] = [];
  private pageSize: number = 10;
  private pageNo: number = 1;
  @State  reachStatus: number = 0;
  private isLoadingMore: boolean = false;
  private initCompleted: boolean = false;
  @State loadingMoreVisible: boolean = false;

  aboutToAppear(): void {
    this.init();
  }

  async init() {
    try {
      this.list = await this.getList(1);
    } catch (e) {
    } finally {
      this.initCompleted = true;
    }
  }

  getList(pageNo: number): Promise<Array<number>> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (pageNo < 4) {
          let newData: number[] = [];
          for (let i = (pageNo - 1) * this.pageSize; i < pageNo * this.pageSize; i++) {
            newData.push(i);
          }
          resolve(newData);
        } else {
          resolve([]);
        }
      }, 1000);
    });
  }

  async handleLoadingMore() {
    if (this.isLoadingMore) {
      return;
    }
    this.isLoadingMore = true;
    this.reachStatus = 1;

    let pageNo = this.pageNo + 1;
    try {
      let data = await this.getList(pageNo);
      if (data && data.length > 0) {
        setTimeout(() => {
          this.list = [...this.list, ...data];
          this.pageNo += 1;
          this.isLoadingMore = false;
          this.reachStatus = 0;
        }, 500);
      } else {
        this.isLoadingMore = false;
        this.reachStatus = 2;
      }
    } catch (e) {
      this.isLoadingMore = false;
    }
  }

  build() {
    List({ space: 20 }) {
      ForEach(this.list, (item: number) => {
        ListItem() {
          Text(item.toString());
        }.width('100%').height(90).backgroundColor('#fff').borderRadius(10);
      }, (item: number) => item.toString());

      LoadingMoreView({visible: this.loadingMoreVisible, status: this.reachStatus});
    }
    .height('100%')
    .width('100%')
    .padding(20)
    .backgroundColor('#f2f2f2')
    .onReachEnd(() => {
      if (this.initCompleted && this.reachStatus !== 2) {
        this.loadingMoreVisible = true;
        this.handleLoadingMore();
      }
    });
  }
}
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.