HarmonyOS 项目要做一个页面，页面中有多级tab的切换展示；如何做布局？

项目要做一个页面，页面中有多级tab的切换展示，此次如何做布局；同时当页面中列表滑动到头时，再次滑动需将顶部内容展示出来；反之先推出顶部内容再滑动列表中数据；请问下如何实现？

HarmonyOS

put_get

2024-10-12 11:15:14

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

可以在官网文档中了解嵌套滑动的使用，链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#nestedscroll11

参考demo如下：

@Entry  
@Component  
struct Index {  
  list: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]  
  build() {  
      Scroll() {  
        Column(){  
        Image($r('app.media.app_icon')).width('100%').height(300).objectFit(ImageFit.Auto)  
          Tabs() {  
            TabContent() {  
              Tabs() {  
                TabContent() {  
                  List({space:10}) {  
                    ForEach(this.list, (item: number) => {  
                      ListItem(){  
                        Column() {  
                          Text(`当前是${item}`)  
                        }.width('100%').height(300).justifyContent(FlexAlign.Center).backgroundColor(Color.Gray).borderRadius(10)  
                      }  
                    })  
                  }.padding({left:10, right:10}).nestedScroll({  
                    scrollForward:NestedScrollMode.PARENT_FIRST,  
                    scrollBackward:NestedScrollMode.SELF_FIRST  
                  })  
                }.tabBar('直播目录')  
                TabContent() {  
                }.tabBar('录播目录')  
                TabContent() {  
                }.tabBar('面授课')  
              }  
            }.tabBar('目录')  
            TabContent() {  
            }.tabBar('详情')  
            TabContent() {  
            }.tabBar('资料')  
          }  
      }  
    }  
  }  
}