HarmonyOS 鸿蒙Next中List组件实现下拉刷新和上拉加载更多

原理解析

• Refresh组件：包裹List实现下拉刷新
• onReachEnd事件：List滚动到底部时触发
• 分页参数：维护当前页码和是否还有更多数据

解决方案

interface CaseListItem {
  caseId: string;
  title: string;
  phenomenon: string;
  tags: string[];
}

@Entry
@Component
struct CaseListPage {
  @State caseList: CaseListItem[] = [];
  @State isLoading: boolean = false;
  @State isRefreshing: boolean = false;
  @State hasMore: boolean = true;
  @State currentPage: number = 1;
  private pageSize: number = 20;
  
  aboutToAppear(): void {
    this.loadData(true);
  }
  
  async loadData(isRefresh: boolean = false): Promise<void> {
    if (this.isLoading) return;
    
    if (isRefresh) {
      this.currentPage = 1;
      this.hasMore = true;
    }
    
    if (!this.hasMore && !isRefresh) return;
    
    this.isLoading = true;
    
    try {
      // 模拟API请求
      const result = await this.fetchCases(this.currentPage, this.pageSize);
      
      if (isRefresh) {
        this.caseList = result.list;
      } else {
        this.caseList = [...this.caseList, ...result.list];
      }
      
      this.hasMore = result.list.length >= this.pageSize;
      if (this.hasMore) {
        this.currentPage++;
      }
    } catch (e) {
      console.error('加载失败', e);
    } finally {
      this.isLoading = false;
      this.isRefreshing = false;
    }
  }
  
  async fetchCases(page: number, size: number): Promise<{ list: CaseListItem[] }> {
    // 实际项目中调用数据库或API
    const allCases = await caseDao.getList();
    const start = (page - 1) * size;
    const end = start + size;
    return { list: allCases.slice(start, end) };
  }
  
  build() {
    Column() {
      // 顶部导航栏
      Row() {
        Text('案例库')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
        Blank()
        Text(`共 ${this.caseList.length} 条`)
          .fontSize(13)
          .fontColor('#999999')
      }
      .width('100%')
      .height(56)
      .padding({ left: 16, right: 16 })
      
      // 下拉刷新 + 列表
      Refresh({ refreshing: $$this.isRefreshing }) {
        List() {
          ForEach(this.caseList, (item: CaseListItem) => {
            ListItem() {
              this.CaseCard(item)
            }
            .padding({ left: 16, right: 16, bottom: 12 })
          }, (item: CaseListItem) => item.caseId)
          
          // 底部加载状态
          ListItem() {
            this.LoadMoreFooter()
          }
        }
        .width('100%')
        .layoutWeight(1)
        .divider({ strokeWidth: 0 })
        .onReachEnd(() => {
          // 滚动到底部，加载更多
          if (!this.isLoading && this.hasMore) {
            this.loadData(false);
          }
        })
      }
      .onRefreshing(() => {
        // 下拉刷新
        this.loadData(true);
      })
    }
    .width('100%')
    .height('100%')
  }
  
  @Builder
  CaseCard(item: CaseListItem) {
    Column({ space: 8 }) {
      Text(item.title)
        .fontSize(16)
        .fontWeight(FontWeight.Medium)
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      
      Text(item.phenomenon)
        .fontSize(13)
        .fontColor('#666666')
        .maxLines(2)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
      
      Row({ space: 6 }) {
        ForEach(item.tags.slice(0, 3), (tag: string) => {
          Text(tag)
            .fontSize(11)
            .fontColor('#1890FF')
            .backgroundColor('#E6F7FF')
            .padding({ left: 8, right: 8, top: 3, bottom: 3 })
            .borderRadius(4)
        })
      }
    }
    .width('100%')
    .padding(16)
    .backgroundColor(Color.White)
    .borderRadius(12)
    .alignItems(HorizontalAlign.Start)
  }
  
  @Builder
  LoadMoreFooter() {
    Row() {
      if (this.isLoading) {
        LoadingProgress().width(20).height(20)
        Text('加载中...').fontSize(13).fontColor('#999999').margin({ left: 8 })
      } else if (!this.hasMore) {
        Text('— 没有更多了 —').fontSize(13).fontColor('#CCCCCC')
      }
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }
}