下拉刷新上拉加载 HarmonyOS 鸿蒙Next

下拉刷新和上拉加载，基本上就是这样

@Entry
@Component
struct Page2 {

  @State list:string[] = []
  @State isRefreshing: boolean = false
  @State canLoadMore: boolean = false;
  private loading: boolean = false;

  refreshData() {
    setTimeout(() =>{
      const list:string[] = [];
      for (let i = 0; i < 3; i++) {
        list.push(`条目   ${i}`);
      }
      this.list = list;
      this.isRefreshing = false;
      this.canLoadMore = true;
    }, 800)
  }

  loadData() {
    if (this.loading) {
      return;
    }
    this.loading = true;
    setTimeout(() =>{
      const list:string[] = [];
      for (let i = 0; i < 3; i++) {
        list.push(`条目   ${this.list.length + i}`);
      }
      this.list.push(...list);
      if (this.list.length >= 20) {
        this.canLoadMore = false;
      } else {
        this.canLoadMore = true;
      }
      this.loading = false;
    }, 800)
  }

  build() {
    RelativeContainer() {
      Refresh({ refreshing: this.isRefreshing }) {
        List() {
          ForEach(this.list, (item: string, index: number) {
            ListItem(){
              Text(item).textAlign(TextAlign.Center).width('100%').height(100)
            }
          })

          ListItem() {
            Text(this.canLoadMore ? "正在加载..." : "全部加载完毕").textAlign(TextAlign.Center).width('100%').height(50)
          }
        }.height('100%')
        .width('100%')
        .onReachEnd(()=>{
          if (this.canLoadMore) {
            this.loadData();
          }
        })
      }.onRefreshing(()=>{
         this.refreshData();
      })
    }
    .height('100%')
    .width('100%')
  }
}

实际得根据UI效果进行调整，整体逻辑上和这个差不多