HarmonyOS 列表实现方案

参考以下demo：

@Entry
@Component
struct ListPage {
  @State pageNumber:number = 1
  @State running:boolean = false
  @State list:number[] = []
  private swiperController: SwiperController = new SwiperController();
  scroller: Scroller = new Scroller;
  aboutToAppear(): void {
    for (let i = 1; i <= 2; i++) {
      this.list.push(i);
    }
  }
  getData(){
    let number = this.list.length + 1
    for (let i = number; i <= 2*this.pageNumber; i++) {
      this.list.push(i);
    }
    this.running = false
    console.log(this.list.length.toString())
  }

  @Builder
  ListItemBuilder(item:number){
    Row(){
      Text(item.toString())
    }
    .width('100%')
    .padding(50)
    .backgroundColor(Color.Pink)
  }
  build() {
    Scroll(this.scroller) {
      Column() {
        Column() {
          Text('直播')
            .textAlign(TextAlign.Center)
            .fontSize(20)
            .padding(10)
            .width('100%')
          Swiper(this.swiperController) {
            Text('0')
              .width('90%')
              .height(250)
              .backgroundColor(Color.Gray)
              .textAlign(TextAlign.Center)
              .fontSize(30)
            Text('1')
              .width('90%')
              .height(250)
              .backgroundColor(Color.Green)
              .textAlign(TextAlign.Center)
              .fontSize(30)
          }
          .indicator(true)
          Column() {
            Text('直播预告')
              .fontSize(20)
              .textAlign(TextAlign.Start)
              .width('100%')
              .margin({ left: '10%', top: '5%', bottom: '5%' })
            Column() {
              Text('高质量发展')
                .fontSize(20)
                .textAlign(TextAlign.Center)
            }.width('90%').height(60)
            .border({ width: 1, color: '#cccccc', radius: 10 })
          }
          Column() {
            Text('正在直播')
              .fontSize(20)
              .textAlign(TextAlign.Start)
              .width('100%')
              .margin({ left: '10%', top: '5%', bottom: '5%' })
            Column({}) {
              Column() {
              }.width('80%').height(80).backgroundColor(0xF5DEB3)

              Column() {
              }.width('80%').height(80).backgroundColor(0xD2B48C)

              Column() {
              }.width('80%').height(80).backgroundColor(0xF5DEB3)
            }.width('100%').height(300).justifyContent(FlexAlign.SpaceBetween)
          }
          Text('慢直播')
            .fontSize(20)
            .textAlign(TextAlign.Start)
            .width('100%')
            .margin({ left: '10%', top: '5%', bottom: '5%' })
          Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
            Text('1').width('45%').height(100).backgroundColor(0xF5DEB3)
            Text('2').width('45%').height(100).backgroundColor(0xF5DEB3)
          }
          .width('90%')
          Text('精彩回顾')
            .fontSize(20)
            .textAlign(TextAlign.Start)
            .width('100%')
            .margin({ left: '10%', top: '5%', bottom: '5%' })
          List({ space: 10 }) {
            ForEach(this.list, (item: number) => {
              this.ListItemBuilder(item)
            }, (item: number) => JSON.stringify(item))
          }
          .padding(20)
          .lanes(2, 10)
          .edgeEffect(EdgeEffect.Spring)
          .onReachEnd(() => {
            if (!this.running) {
              this.running = true
              this.pageNumber++
              setTimeout(() => {
                this.getData()
              }, 2000)
            }
          })
        }
        .width('100%')
        .alignItems(HorizontalAlign.Center)
      }
    }
    .width("100%").height("100%")
    .edgeEffect(EdgeEffect.Spring)
  }
}