OpenHarmony ListView如何分页

在 OpenHarmony（ArkUI） 里，并没有像 Android 那样直接的 ListView 控件，而是使用 List + ForEach / LazyForEach 来实现列表。分页通常有两种常见方式：

一、常见分页方式

方式 1：上拉加载更多（最常见）

适合移动端长列表

核心思路：

• 维护一个 dataList
• 监听 List 滚动到底部
• 触发加载下一页数据

示例（ArkTS）

@Entry
@Component
struct PageExample {
  @State dataList: string[] = Array.from({ length: 20 }, (_, i) => `Item ${i}`)
  @State loading: boolean = false
  private page: number = 1

  loadMore() {
    if (this.loading) return
    this.loading = true

    // 模拟网络请求
    setTimeout(() => {
      const newData = Array.from({ length: 10 }, (_, i) => `Item ${this.dataList.length + i}`)
      this.dataList = this.dataList.concat(newData)
      this.page++
      this.loading = false
    }, 1000)
  }

  build() {
    Column() {
      List() {
        ForEach(this.dataList, (item: string) => {
          ListItem() {
            Text(item)
              .fontSize(18)
              .padding(12)
          }
        })

        if (this.loading) {
          ListItem() {
            Text('加载中...')
              .fontSize(14)
              .padding(12)
          }
        }
      }
      .onReachEnd(() => {
        this.loadMore()
      })
    }
  }
}

✅ 关键点：

• onReachEnd()：滚动到底部触发
• loading 防止重复请求

二、方式 2：分页按钮（上一页 / 下一页）

适合后台管理或数据量不大

@State page: number = 1
@State dataList: string[] = []

loadPage(page: number) {
  // 请求第 page 页数据
}

Button('上一页').onClick(() => {
  if (this.page > 1) {
    this.page--
    this.loadPage(this.page)
  }
})

Button('下一页').onClick(() => {
  this.page++
  this.loadPage(this.page)
})

三、方式 3：LazyForEach（性能更好，推荐大数据）

class MyDataSource implements IDataSource {
  private list: string[] = []

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): string {
    return this.list[index]
  }

  addData(data: string[]) {
    this.list = this.list.concat(data)
  }
}

配合 onReachEnd() 使用，效果最佳。

四、推荐方案总结

如果你能提供：

• OpenHarmony 版本（API 9 / 10 / 11）
• 是否使用 ArkTS / JS
• 是否对接后端接口

我可以给你一个完整可直接运行的分页 Demo。