HarmonyOS Scroll包裹Tabs内容无法显示完整

1、使用Scroll包裹Tabs，Tabs里面存在List，内容无法显示完整
2、需求是List不滚动，只有Scroll滑动将整个Tabs内容跟着滑动
ps:就跟其他系统原生一样，使用NestedScrollView包裹TabLayout，TabLayout里面有RecyclerView，
HarmonyOS
superinsect
2024-12-25 11:28:28
浏览
回答 1
待解决
回答 1
按赞同
按时间
put_get
示例参考如下：
@Entry
@Component
struct TestScroll {
  @State currentIndex: number = 0;
  @State mTestList: Array<string> = []
  scroller: Scroller = new Scroller();
  @State tabHeight:number=50;
  aboutToAppear(): void {
    for (let index = 0; index < 30; index++) {
      this.mTestList.push("这是数据" + index)
    }
    this.tabHeight=this.mTestList.length*73
  }

  @Builder
  topHeaderView() {
    Row() {
      Image($r('app.media.layered_image'))
        .objectFit(ImageFit.None)
        .onClick(() => {
          this.onLeftImageClick()
        })
        .width("32vp")
        .height("48vp")
        .margin({ left: 8 })
        .padding({
          left: 10,
          right: 10,
          top: 10,
          bottom: 10
        })
      Text("球场预定").fontColor($r('app.color.c_333333')).fontSize(18).fontWeight(500).margin({ left: 22 })
    }
    .justifyContent(FlexAlign.SpaceBetween)
    .width("100%")
    .height(48)
  }

  onLeftImageClick() {
    throw new Error('Method not implemented.');
  }

  build() {
    Column() {
      this.topHeaderView()
      Flex({ direction: FlexDirection.Column }) {
        Scroll(this.scroller) {
          Column() {
            Column() {
              Text('TAB')
                .backgroundColor(Color.Brown)
                .height(40)
                .width('100%')
              Tabs({ barPosition: BarPosition.Start }) {
                TabContent() {

                  List({ space: 10 }) {
                    ForEach(this.mTestList, (s: string) => {
                      ListItem() {
                        Column() {
                          Text("其实")
                          Text(s)
                          Text("结束")
                        }
                        .width("100%")
                        .height(60)
                        .backgroundColor($r('app.color.c_white'))
                        .borderWidth(1)
                        .borderColor($r('app.color.c_ffff5f0f'))
                      }
                    })
                  }
                  .listDirection(Axis.Vertical)
                  .enableScrollInteraction(false)
                }.tabBar('公告1')


                TabContent() {
                  Column() {
                    Column() {
                      Row() {
                        Text("球场类型").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("球场类型").fontColor($r('app.color.c_333333')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("建立时间").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("建立时间").fontColor($r('app.color.c_333333')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("球场数据").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("球场数据").fontColor($r('app.color.c_333333')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("设计师").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("设计师").fontColor($r('app.color.c_333333')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("球道长度").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("球道长度").fontColor($r('app.color.c_333333')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("球场草种").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("球场草种").fontColor($r('app.color.c_333333')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("果岭草种").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("果岭草种").fontColor($r('app.color.c_333333')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("球场电话").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("球场电话").fontColor($r('app.color.c_FF1890FF')).fontSize(15)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .justifyContent(FlexAlign.Start)
                      .onClick(() => {
                      })

                      Row() {
                        Text("球场地址").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("球场地址")
                          .fontColor($r('app.color.c_333333'))
                          .fontSize(15)
                          .textAlign(TextAlign.Start)
                          .layoutWeight(1)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .width("100%")
                      .alignItems(VerticalAlign.Top)
                      .justifyContent(FlexAlign.Start)

                      Row() {
                        Text("球会设施").fontColor($r('app.color.c_999999')).fontSize(15).width(80)
                        Text("球会设施")
                          .fontColor($r('app.color.c_333333'))
                          .fontSize(15)
                          .textAlign(TextAlign.Start)
                          .layoutWeight(1)
                      }
                      .padding({
                        left: 10,
                        right: 10,
                        top: 8,
                        bottom: 8
                      })
                      .alignItems(VerticalAlign.Top)
                      .justifyContent(FlexAlign.Start)

                    }
                    .margin({ top: 7 })
                    .borderRadius(5)
                    .backgroundColor($r('app.color.c_white'))
                    .justifyContent(FlexAlign.Start)

                    Row() {
                      Text("球道图").fontColor($r('app.color.c_999999')).fontSize(15).width(80).padding({ left: 10 })
                      Text("查看详情") {
                        Span("查看详情 ").fontColor($r('app.color.c_ff4b87ff')).fontSize(13)
                        ImageSpan($r('app.media.background'))
                          .width(16)
                          .height(16)
                          .verticalAlign(ImageSpanAlignment.CENTER)
                      }.fontColor($r('app.color.c_333333')).fontSize(15).padding({ right: 10 })
                    }
                    .margin({ top: 7 })
                    .height("40vp")
                    .width("100%")
                    .borderRadius(5)
                    .backgroundColor($r('app.color.c_white'))
                    .alignItems(VerticalAlign.Center)
                    .justifyContent(FlexAlign.SpaceBetween)
                    .onClick(() => {
                    })

                    Column() {
                      Text("球场简介")
                        .fontColor($r('app.color.c_999999'))
                        .fontSize(15)
                        .margin({ top: 15, left: 10 })
                        .textAlign(TextAlign.Center)

                      Text("我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落我是文本段落")
                        .fontColor($r('app.color.c_999999'))
                        .fontSize(15)
                        .margin({
                          top: 15,
                          left: 10,
                          right: 10,
                          bottom: 15
                        })
                        .textAlign(TextAlign.Center)

                    }
                    .margin({ top: 7, bottom: 30 })
                    .borderRadius(5)
                    .backgroundColor($r('app.color.c_white'))
                    .alignItems(HorizontalAlign.Start)
                    .justifyContent(FlexAlign.Start)

                  }
                  .padding({ bottom: 15 })
                  .backgroundColor($r('app.color.c_FFF7F7F7'))
                  .justifyContent(FlexAlign.Start)
                  .width("100%")


                }.tabBar('公告2')
              }
              .onTabBarClick((index:number)=>{
                if(index==0){
                  this.tabHeight=this.mTestList.length*73
                }else{
                  this.tabHeight=800
                }
              })
              .height(this.tabHeight)  //当涉及到list的组件时，动态list个数计算tabbar的高度
              .vertical(false)
            }
            Button('11111').width(100)
            Button('11111').width(100)
            Button('11111').width(100)
          }
        }
      }
      .layoutWeight(1)
    }
  }
}
2024-12-25 14:35:51
如何写精华回答，获更多曝光？
发布
51CTO

51CTO博客

51CTO学堂

HarmonyOS Scroll包裹Tabs内容无法显示完整

订阅鸿蒙技术特刊，精选内容抢先看
