OpenHarmony ListView怎样动态加载

在 OpenHarmony（ArkUI / eTS） 中，ListView（现在更常用 List 组件）动态加载通常指：

• 数据变化时自动刷新列表
• 下拉/上拉加载更多
• 滚动到底部自动加载

下面按常见场景给你说明（以 ArkTS + List 为例，适用于 OpenHarmony 3.2+）。

一、最基础的“动态数据”加载（数据驱动）

OpenHarmony 的 List 是 数据绑定驱动 的，只要数据源变化，列表就会自动更新。

示例：动态添加数据

@Entry
@Component
struct ListViewDemo {
  @State items: string[] = ['A', 'B', 'C']

  build() {
    Column() {
      Button('加载更多')
        .onClick(() => {
          this.items.push(`Item ${this.items.length + 1}`)
        })

      List() {
        ForEach(this.items, (item) => {
          ListItem() {
            Text(item)
              .fontSize(20)
              .padding(10)
          }
        }, item => item)
      }
    }
  }
}

✅ 关键点：

• 使用 @State
• 修改 items 数组即可动态刷新

二、滚动到底部自动加载（常用）

方式：监听 List 的 onScrollIndex

@Entry
@Component
struct AutoLoadList {
  @State items: number[] = []
  private page = 0

  aboutToAppear() {
    this.loadData()
  }

  loadData() {
    const newData = []
    for (let i = 0; i < 20; i++) {
      newData.push(this.page * 20 + i)
    }
    this.items.push(...newData)
    this.page++
  }

  build() {
    List() {
      ForEach(this.items, (item) => {
        ListItem() {
          Text(`Item ${item}`)
            .fontSize(18)
            .padding(10)
        }
      }, item => item.toString())
    }
    .onScrollIndex((start, end) => {
      if (end >= this.items.length - 1) {
        this.loadData()
      }
    })
  }
}

✅ 适合：

• 日志
• 消息
• 商品列表

三、使用 LazyForEach（性能更好，推荐）

当数据量很大时，用 LazyForEach 而不是 ForEach

1. 创建 DataSource

class MyDataSource extends BasicDataSource<number> {
  private data: number[] = []

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

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

  addData(data: number[]) {
    this.data.push(...data)
    this.notifyDataAdd(this.data.length - data.length)
  }
}

2. 使用 LazyForEach

@Entry
@Component
struct LazyListDemo {
  private dataSource = new MyDataSource()
  private page = 0

  aboutToAppear() {
    this.load()
  }

  load() {
    const arr = []
    for (let i = 0; i < 20; i++) {
      arr.push(this.page * 20 + i)
    }
    this.dataSource.addData(arr)
    this.page++
  }

  build() {
    List() {
      LazyForEach(this.dataSource, (item) => {
        ListItem() {
          Text(`Item ${item}`)
        }
      }, item => item.toString())
    }
    .onScrollIndex((start, end) => {
      if (end >= this.dataSource.totalCount() - 1) {
        this.load()
      }
    })
  }
}

四、常见问题

Q1：为什么列表不刷新？

• 必须使用 @State / @Link / AppStorage
• 不要直接改数组索引（如 items[0] = x）

Q2：List 和 ListView 的区别？

• ListView：旧 API（不推荐）
• List + ListItem：新标准 ✅

五、总结

如果你告诉我：

• OpenHarmony 版本
• 使用 JS / eTS / ArkTS
• 是手机 / 穿戴 / 电视

我可以给你 更精确的示例代码。