HarmonyOS list嵌套tab中列表高度变化

List({ space: 12 }) {
  ListItemGroup() {
    ListItem() {
      TopHeader()
    }
  }

  ListItemGroup({ header: this.header }) {
    ListItem() {
      Tabs({ index: this.currentInfoIndex }) {
        TabContent() {
          ListA()
        }

        TabContent() {
          ListB()
        }

        TabContent() {
          ListC()
        }
      }
      .barHeight(0)
      .scrollable(false)
    }
  }
}
.backgroundColor(Color.Gray)
.layoutWeight(1)

这样的结构中tabcontent的list增加了下拉加载更多,数据胡来后。list的高度没有变化,导致新增的数据无法显示该怎么处理?

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

参考示例如下:

import { PullToRefresh } from '@ohos/pulltorefresh'

@Entry
@Component
struct TabPage {
  @State message: string = 'Hello World';
  private dataNumbers: string[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  private dataStrings: string[] =
    ['我的评论', '与我相关', '个人中心1', '个人中心2', '个人中心3', '我的发布', '设置', '退出登录'];
  @State data: string[] = this.dataStrings;
  private scroller: Scroller = new Scroller();

  @Builder
  header() {
    Column() {
      Text('Header')
        .fontSize(20)
    }.backgroundColor(Color.Red)
  }

  @Builder
  getListView() {
    List({ scroller: this.scroller }) {
      ForEach(this.data, (item: number) => {
        ListItem() {
          Text(`header2-${item}`).padding(30)
        }
      })
    }.edgeEffect(EdgeEffect.None)
  }

  build() {
    Column() {
      List({ space: 1 }) {
        ListItemGroup() {
          ListItem() {
            Text(this.message)
              .fontSize(25)
          }
        }

        ListItemGroup({ header: this.header() }) {
          ListItem() {
            Tabs({ index: 1 }) {
              TabContent() {
                Column() {
                  PullToRefresh({
                    data: $data,
                    scroller: this.scroller,
                    customList: () => {
                      this.getListView()
                    },
                    onRefresh: () => {
                      return new Promise<string>((reslove, reject) => {
                        setTimeout(() => {
                          reslove('刷新成功');
                          this.data = this.dataNumbers;
                        }, 2000);
                      })
                    },
                    onLoadMore: () => {
                      return new Promise<string>((reslove, reject) => {
                        setTimeout(() => {
                          reslove('');
                          this.data.push("增加的条目" + this.data.length);
                        }, 2000);
                      })
                    },
                    customLoad: null,
                    customRefresh: null,
                  })
                }
              }
            }.barHeight(0).scrollable(false)
          }
        }
      }
    }
    .height('100%')
    .width('100%')
  }
}
分享
微博
QQ
微信
回复
3天前
相关问题
HarmonyOS List嵌套list的布局
118浏览 • 1回复 待解决
HarmonyOS List嵌套ListList嵌套Grid问题
177浏览 • 1回复 待解决
HarmonyOS Tab + List 性能优化
308浏览 • 1回复 待解决
分组列表实践(嵌套列表
1234浏览 • 1回复 待解决
HarmonyOS Scroll嵌套List滑动事件冲突
152浏览 • 1回复 待解决
HarmonyOS List嵌套不能同步数据
394浏览 • 1回复 待解决
HarmonyOS list嵌套MapComponent滑动冲突
46浏览 • 1回复 待解决
HarmonyOS list 列表项交换
171浏览 • 1回复 待解决
HarmonyOS 设置list组件高度
31浏览 • 1回复 待解决
HarmonyOS 控件高度随滚动变化
329浏览 • 1回复 待解决
HarmonyOS 列表List相关问题
598浏览 • 1回复 待解决
HarmonyOS PullToRefresh嵌套List显示不全
131浏览 • 1回复 待解决
HarmonyOS List和Web嵌套问题
144浏览 • 1回复 待解决