OpenHarmony列表组件如何分页

在 OpenHarmony（ArkUI） 中，“列表组件分页”通常有两种常见场景，分别使用不同的实现方式：

一、本地数据分页（前端分页）

适用于数据量不大、已全部加载到本地的情况。

1. 使用 List + ForEach（手动分页）

核心思路：

• 维护 currentPage
• 根据 pageSize 截取数据
• 点击“下一页 / 上一页”更新数据

@Entry
@Component
struct PageListExample {
  private allData: number[] = Array.from({ length: 100 }, (_, i) => i + 1)
  @State currentPage: number = 1
  private pageSize: number = 10

  get pageData() {
    const start = (this.currentPage - 1) * this.pageSize
    return this.allData.slice(start, start + this.pageSize)
  }

  build() {
    Column() {
      List() {
        ForEach(this.pageData, (item: number) => {
          ListItem() {
            Text(`Item ${item}`)
              .fontSize(20)
              .padding(10)
          }
        })
      }

      Row() {
        Button('上一页')
          .enabled(this.currentPage > 1)
          .onClick(() => this.currentPage--)

        Button('下一页')
          .enabled(this.currentPage * this.pageSize < this.allData.length)
          .onClick(() => this.currentPage++)
      }
      .margin(10)
    }
  }
}

✅ 优点：简单直观
❌ 缺点：不适合大数据量

二、滚动加载更多（懒加载分页）

适用于数据量大、接口分页的情况（最常见）。

2. 使用 List + onReachEnd

当列表滚动到底部时触发加载下一页。

@Entry
@Component
struct LazyListExample {
  @State listData: string[] = []
  private page: number = 1
  private pageSize: number = 20
  @State loading: boolean = false

  aboutToAppear() {
    this.loadData()
  }

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

    // 模拟网络请求
    setTimeout(() => {
      const newData = Array.from(
        { length: this.pageSize },
        (_, i) => `第${this.page}页-数据${i + 1}`
      )
      this.listData = this.listData.concat(newData)
      this.page++
      this.loading = false
    }, 500)
  }

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

      if (this.loading) {
        ListItem() {
          LoadingProgress()
          Text('加载中...')
        }
      }
    }
    .onReachEnd(() => {
      this.loadData()
    })
  }
}

✅ 优点：性能好，适合真实业务
✅ 支持无限滚动
❌ 需要后端分页接口

三、使用 LazyForEach（高性能分页推荐）

如果数据量非常大（上千条），推荐使用 LazyForEach + IDataSource。

适合场景：

• 长列表
• 内存敏感
• 配合分页加载

（如果你需要，我可以直接给你一个 LazyForEach 分页完整示例）

四、总结选型建议

如果你能告诉我：

• OpenHarmony 版本（API 9 / 10 / 11）
• 是本地数据还是接口数据
• 想要「页码分页」还是「下拉加载更多」

我可以给你更贴合业务的示例代码。