HarmonyOS 鸿蒙Next tabs组件

@Component
export default struct DevicesList {
  @Link currentBreakpoint: string
  @State currentIndex: number = 0
  //更tabs-content跳转有关
  private controller = new TabsController()
  //更list跳转有关
  private listScroller: Scroller = new Scroller();
  //tab标签
  tabs: Array<tabsInfo> = [
    new tabsInfo('device', '所有设备'),
    new tabsInfo('type', '我的分类')
  ]
  //tab标签和点击事件
  @Builder tab(name: string, tabIndex: number) {
    Row() {
      Text(name)
        .width(CommonConstants.FULL_SIZE)
        .fontSize(CommonConstants.DEFAULT_14)
        .fontColor(this.currentIndex === tabIndex ? CommonConstants.TEXT_FFF : CommonConstants.TEXT_tab_disSelected)
        .fontWeight(this.currentIndex === tabIndex ? CommonConstants.FONT_WEIGHT_600 : CommonConstants.FONT_WEIGHT_400)
        .textAlign(TextAlign.Center)
        .onClick(() => {
          this.controller.changeIndex(tabIndex)
          this.listScroller.scrollToIndex(tabIndex)
        })
    }
    .width(new BreakpointType({
      sm: 80,
      md: 90,
      lg: 100
    }).getValue(this.currentBreakpoint))
    .height(40)
  }

  build() {
    Column({space: CommonConstants.SPACE_4}) {
      //标签
      Row(){
        //tabs标签
        List({ scroller: this.listScroller }){
          ForEach(this.tabs,(item: tabsInfo,index:number)=>{
            ListItem(){
              Column(){
                //tab
                this.tab(item.title, index)
                //tabsLine滚动条
                Column().width(40).height(4).backgroundColor(CommonConstants.TEXT_LINE)
                  .visibility(this.currentIndex === index ?  Visibility.Visible : Visibility.Hidden)
              }
            }
            .height(60)
          })
        }
        .width(CommonConstants.FULL_SIZE)
        .height(60)
        .listDirection(Axis.Horizontal)
        .scrollBar(BarState.Off)
        .layoutWeight(1)
        //筛选图标
        Row({space: CommonConstants.SPACE_4}){
          Image($rawfile('black_icon/mipmap-xxhdpi/snowyi_classify_black.png'))
            .width(16)
            .height(16)
          Text('筛选')
            .fontColor(CommonConstants.TEXT_FFF)
            .fontSize(CommonConstants.DEFAULT_14)
        }.width(60)
      }
      .width(CommonConstants.FULL_SIZE)
      //tabs内容
      Tabs({ controller: this.controller}) {
        ForEach(this.tabs,(item: tabsInfo, index: number)=>{
          if(index === 0){
            TabContent() {
              AllDevices({currentBreakpoint: this.currentBreakpoint})
            }
            .width(CommonConstants.FULL_SIZE)
            .height(CommonConstants.FULL_SIZE)
          }else if(index === 1){
            TabContent() {
              DevicesType({currentBreakpoint: this.currentBreakpoint})
            }
            .width(CommonConstants.FULL_SIZE)
            .height(CommonConstants.FULL_SIZE)
          }

        })
      }
      .barWidth(0)
      .barHeight(0)
      .width(CommonConstants.FULL_SIZE)
      .height(CommonConstants.FULL_SIZE)
      .scrollable(false)
      .onChange(index => this.currentIndex = index)
      .layoutWeight(1)
    }
    .layoutWeight(1)
    .padding({bottom: 10})
  }
}

主要就是把tabs的barwidth,barheight给0，隐藏掉自带的标签高度，然后自定义一个头部标签，联动就行