如何在 ArkUI 中实现内容分页加载？

Question

研究如何在 ArkUI 中设计分页加载，提高数据展示性能。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以通过 List 的懒加载功能实现分页加载，结合 onScroll 事件监听用户滚动，动态加载更多数据。

@Entry
@Component
struct PaginationExample {
  @State items: number[] = Array.from({ length: 10 }, (_, i) => i + 1);

  build() {
    List({
      data: this.items,
      itemBuilder: (item) => {
        return Text(`Item ${item}`).fontSize(20).padding(10);
      }
    })
    .onScroll((event) => {
      if (event.scrollOffset >= event.scrollExtent - 100) {
        this.loadMoreItems();
      }
    })
    .height('80%');
  }

  loadMoreItems() {
    const nextItems = Array.from({ length: 10 }, (_, i) => this.items.length + i + 1);
    this.items = [...this.items, ...nextItems];
  }
}