在HarmonyOS NEXT开发中列表实现方案？

Question

在HarmonyOS NEXT开发中列表实现方案？需要实现列表，有很多个模块，最后精彩回顾模块是可以上拉加载更多的的，有分页的。

Answer 1

参考以下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) 
  } 
}