HarmonyOS 列表实现方案

需要实现列表,有很多个模块,最后精彩回顾模块是可以上拉加载更多的的,有分页的。

HarmonyOS
2024-12-20 16:25:37
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

参考以下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)
  }
}
分享
微博
QQ
微信
回复
2024-12-20 17:23:45
相关问题
HarmonyOS 卡片列表网络图片解决方案
593浏览 • 1回复 待解决
HarmonyOS IOC实现方案
505浏览 • 1回复 待解决
HarmonyOS 异步任务列表实现
209浏览 • 1回复 待解决
HarmonyOS 如何实现列表拖拽
407浏览 • 1回复 待解决
HarmonyOS 分页列表实现方式
443浏览 • 1回复 待解决
HarmonyOS NFC方案如何实现
438浏览 • 1回复 待解决
HarmonyOS 效果实现方案
988浏览 • 1回复 待解决
页面和列表嵌套滚动,实现列表吸顶
1741浏览 • 1回复 待解决
HarmonyOS 点赞动画实现方案
513浏览 • 1回复 待解决
HarmonyOS实现方案的问题
396浏览 • 2回复 待解决
HarmonyOS 全局loading的实现方案
310浏览 • 1回复 待解决
HarmonyOS 埋点方案如何实现
498浏览 • 1回复 待解决
HarmonyOS 应用多主题实现方案
803浏览 • 1回复 待解决
HarmonyOS 列表视频全屏播放实现
874浏览 • 1回复 待解决
拖动实现列表重新排序
1531浏览 • 1回复 待解决
HarmonyOS 怎么实现下拉分类列表
601浏览 • 1回复 待解决
HarmonyOS 适老版(大字版)实现方案
394浏览 • 1回复 待解决
HarmonyOS Next埋点方案如何实现
263浏览 • 1回复 待解决
HarmonyOS桌面小窗口实现方案
974浏览 • 1回复 待解决
HarmonyOS List瀑布流的实现方案
507浏览 • 1回复 待解决
HarmonyOS 加密和解密的方案实现
399浏览 • 1回复 待解决
HarmonyOS 如何实现列表的上拉效果
312浏览 • 1回复 待解决