手把手教你用 ArkUI 写出高性能分页列表：List + onScroll 实战解析

摘要

在移动应用开发中，列表分页加载几乎是最常见的场景之一，比如社交应用的消息流、商品展示页、评论列表等。分页不仅能节省内存，还能提升应用性能，提升用户体验。本文将基于 HarmonyOS 的 ArkUI 框架，讲解如何使用 List 和 onScroll 事件来实现分页加载的完整方案，并结合多个实际开发场景进行代码演示和说明。

引言

ArkUI 是 HarmonyOS 提供的一套声明式 UI 框架，非常适合构建响应式、高性能的多端界面。它的 List 组件支持懒加载，非常适合用于实现内容分页加载。

相比传统的写法，ArkUI 结合 @State 状态管理 + 滚动事件监听 + 动态扩容数组，能很自然地实现"边滚动边加载"的效果，而且代码更易读、扩展性更好。

下面我们就一步步看看在 ArkUI 中是怎么实现分页加载的。

ArkUI 中的分页加载实现方案

使用 List 和 onScroll 实现动态加载

核心思路

分页加载的核心在于两个点：

初始化展示一部分数据
在用户快要滚动到底部的时候，再加载更多数据

在 ArkUI 中，我们可以用 List 展示数据，再配合 onScroll 监听滚动位置，当距离底部还剩一段距离时，就调用加载函数加载下一页。

代码示例：分页加载基础 Demo

ts 复制代码

@Entry
@Component
struct PaginationExample {
  // 初始显示10条数据
  @State items: number[] = Array.from({ length: 10 }, (_, i) => i + 1);

  build() {
    Column() {
      Text('分页加载示例')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .padding(16)

      List({
        data: this.items,
        itemBuilder: (item) => {
          return Text(`Item ${item}`)
            .fontSize(20)
            .padding(10)
            .backgroundColor(0xf0f0f0)
            .margin({ bottom: 8 })
        }
      })
      .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];
  }
}

场景应用拆解

场景一：社交应用的动态流加载

在社交平台上，首页动态/微博/朋友圈通常一打开只加载最近几条，用户向下滑动时才继续加载旧内容。可以用相同的分页机制实现：

ts 复制代码

@State posts: string[] = ['今天天气真好', '刚吃完火锅', '周末看了电影'];

loadMorePosts() {
  const newPosts = ['补一条旧动态', '继续翻老内容'];
  this.posts = [...this.posts, ...newPosts];
}

场景二：电商 App 的商品列表加载

电商商品页通常有成百上千个商品，不可能一次性加载完，可以这样做：

ts 复制代码

@State products: Product[] = this.initProducts();

loadMoreProducts() {
  let newProducts = this.getNextPage(); // 模拟请求接口
  this.products = [...this.products, ...newProducts];
}

这里的 getNextPage() 可以是一个接口请求，也可以是本地模拟的数据。

场景三：评论区的分页显示

一个长评论区如果一次性加载几百条评论，性能堪忧，可以这样分页：

ts 复制代码

@State comments: string[] = ['用户A：不错', '用户B：好评'];

loadMoreComments() {
  const more = ['用户C：一般般', '用户D：内容不错'];
  this.comments = [...this.comments, ...more];
}

Tip： 可以考虑加入 loading 动画或底部提示："正在加载中" 或 "没有更多内容"。

QA 环节：开发者常见问题答疑

Q1：为什么我用 onScroll 没触发分页？

答：检查 scrollOffset >= scrollExtent - xx 的判断是否正确，太大的缓冲区可能导致条件永远为 false。也要确保 List 高度不是无限的（比如必须限制高度为 '80%' 这种），不然不会触发滚动事件。

Q2：加载时可以加 loading 提示吗？

答：完全可以。例如：

ts 复制代码

@State isLoading: boolean = false;

loadMoreItems() {
  if (this.isLoading) return;

  this.isLoading = true;
  setTimeout(() => {
    const newItems = Array.from({ length: 10 }, (_, i) => this.items.length + i + 1);
    this.items = [...this.items, ...newItems];
    this.isLoading = false;
  }, 1000); // 模拟加载耗时
}

并在页面底部加一句：

ts 复制代码

if (this.isLoading) {
  Text('正在加载更多...')
    .fontSize(14)
    .padding(10)
}

Q3：怎么判断加载完所有数据？

答：最好有一个 hasMore 的标志字段，当服务端返回已经没有下一页数据时，置为 false，然后不再触发加载。例如：

ts 复制代码

@State hasMore: boolean = true;

loadMoreItems() {
  if (!this.hasMore) return;

  // 拉取数据逻辑...
  if (返回数据.length === 0) {
    this.hasMore = false;
  }
}

总结

分页加载在 ArkUI 中实现起来其实非常简单，只需要掌握几个关键点：

利用 @State 来动态扩容数据数组
使用 List 搭配 onScroll 监听滚动位置
合理设置滚动阈值和加载函数逻辑
加入 loading 状态和 hasMore 判断，提升用户体验

分页加载功能几乎适用于任何需要显示大量数据的场景，是提升应用性能的常见方法。结合 ArkUI 的响应式机制，开发者可以轻松打造出流畅的分页加载体验。

如果你在开发的过程中有更多高级需求（比如服务端分页、缓存、下拉刷新等），这套方案也完全可以继续扩展和升级。