HarmonyOS 鸿蒙Next懒加载的具体实践

楼主你好，可以参考下面demo：

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

constructor(list: number[]) { this.list = list }

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

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

registerDataChangeListener(listener: DataChangeListener): void { }

unregisterDataChangeListener() { } }

@Entry @Component struct LazyForEachDemo { private list: MyDataSource2 = new MyDataSource2(); private swiperController: SwiperController = new SwiperController() private data: MyDataSource = new MyDataSource([])

@Builder itemHead(text: string) { Text(text) .fontSize(20) .backgroundColor(0xAABBCC) .width(‘100%’) .padding(10) }

@Builder itemFoot(num: number) { Text(‘共’ + num + ‘节课’) .fontSize(16) .backgroundColor(0xAABBCC) .width(‘100%’) .padding(5) }

aboutToAppear() { for (let date = 1; date < ~~(Math.random() * 30) + 3; date++) { let dayData = new dateListItem(date + ‘’); for (let index = 1; index < ~~(Math.random() * 100) + 30; index++) { dayData.orderList.pushData(hello${index}); } this.list.pushData(dayData); }

let list: number[] = []
for (let i = 1; i <= 10; i++) {
  list.push(i);
}
this.data = new MyDataSource(list)

}

build() { Column() { Swiper(this.swiperController) { LazyForEach(this.data, (item: string) => { Text(item.toString()) .width(‘90%’) .height(160) .backgroundColor(0xAFEEEE) .textAlign(TextAlign.Center) .fontSize(30) }, (item: string) => item) } .displayCount(3, true) .autoPlay(true) .interval(4000) .loop(true) .duration(1000) .itemSpace(10) .indicator( // 设置圆点导航点样式 new DotIndicator() .itemWidth(15) .itemHeight(15) .selectedItemWidth(15) .selectedItemHeight(15) .color(Color.Gray) .selectedColor(Color.Blue)) .margin(5)

  Swiper(this.swiperController) {
    LazyForEach(this.data, (item: string) => {
      Text(item.toString())
        .width('90%')
        .height(160)
        .backgroundColor(0xAFEEEE)
        .textAlign(TextAlign.Center)
        .fontSize(30)
    }, (item: string) => item)
  }
  .displayCount(3, true)
  .autoPlay(true)
  .interval(4000)
  .loop(true)
  .duration(1000)
  .itemSpace(10)
  .indicator( // 设置圆点导航点样式
    new DotIndicator()
      .itemWidth(15)
      .itemHeight(15)
      .selectedItemWidth(15)
      .selectedItemHeight(15)
      .color(Color.Gray)
      .selectedColor(Color.Blue))

  List({ space: 20 }) {
    LazyForEach(this.list, (item: dateListItem) => {
      ListItemGroup({ header: this.itemHead(item.date + ''), footer: this.itemFoot(item.orderList.totalCount()) }) {
        LazyForEach(item.orderList, (order: string,) => {
          ListItem() {
            Text(order)
              .width('100%')
              .height(60)
              .fontSize(20)
              .textAlign(TextAlign.Center)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => JSON.stringify(item))
      }
      .divider({ strokeWidth: 1, color: Color.Blue })
    })
  }
  .height('100%')
  .cachedCount(1)
  .width('90%')
  .sticky(StickyStyle.Header | StickyStyle.Footer)
  .scrollBar(BarState.Off)
}
.width('100%')
.height('100%')
.backgroundColor(0xDCDCDC)
.padding({ top: 5 })

} }

class BasicDataSource implements IDataSource { private listeners: DataChangeListener[] = []; private originDataArray: string[] = [];

public totalCount(): number { return 0; }

public getData(index: number): string | dateListItem { return this.originDataArray[index]; }

registerDataChangeListener(listener: DataChangeListener): void { if (this.listeners.indexOf(listener) < 0) { this.listeners.push(listener); } }

unregisterDataChangeListener(listener: DataChangeListener): void { const pos = this.listeners.indexOf(listener); if (pos >= 0) { this.listeners.splice(pos, 1); } }

notifyDataReload(): void { this.listeners.forEach(listener => { listener.onDataReloaded(); }) }

notifyDataAdd(index: number): void { this.listeners.forEach(listener => { listener.onDataAdd(index); }) }

notifyDataChange(index: number): void { this.listeners.forEach(listener => { listener.onDataChange(index); }) }

notifyDataDelete(index: number): void { this.listeners.forEach(listener => { listener.onDataDelete(index); }) } }

class MyDataSource1 extends BasicDataSource { private dataArray: string[] = [];

public totalCount(): number { return this.dataArray.length; }

public getData(index: number): string { return this.dataArray[index]; }

public addData(index: number, data: string): void { this.dataArray.splice(index, 0, data); this.notifyDataAdd(index); }

public pushData(data: string): void { this.dataArray.push(data); this.notifyDataAdd(this.dataArray.length - 1); } }

class MyDataSource2 extends BasicDataSource { private dataArray: dateListItem[] = [];

public totalCount(): number { return this.dataArray.length; }

public getData(index: number): dateListItem { return this.dataArray[index]; }

public addData(index: number, data: dateListItem): void { this.dataArray.splice(index, 0, data); this.notifyDataAdd(index); }

public pushData(data: dateListItem): void { this.dataArray.push(data); this.notifyDataAdd(this.dataArray.length - 1); } }

class dateListItem { date: string; orderList: MyDataSource1;

constructor(date: string) { this.date = date; this.orderList = new MyDataSource1(); } }

按照您说的轮播图您可以使用两个Swiper，参考链接：[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-swiper-V5)

然后懒加载的话，您可以参考：[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-rendering-control-lazyforeach-0000001820879609](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-rendering-control-lazyforeach-0000001820879609)