HarmonyOS Next Tabs 组件使用

2025-06-23
北京
本文字数：1316 字
阅读完需：约 4 分钟

Tabs 可以搭配 TabContent 使用也可以搭配 Swiper 使用，本文介绍和 Swiper 搭配使用

Tabs 组件的页面组成包含两个部分，分别是 TabContent 和 TabBar。TabContent 是内容页，TabBar 是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

@Componentexport struct Colleague{  @State fontColor: string = '#182431'  @State selectedFontColor: string = '#007DFF'  @State currentIndex: number = 0  @State selectedIndex: number = 0  private controller: TabsController = new TabsController()  private swiperController: SwiperController = new SwiperController()  tabs:string[]=['生活服务','办公必备','出行出差','人资服务','财务服务','公司新闻'];  @Builder tabBuilder(index: number, name: string) {    Column() {      Text(name)        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)        .fontSize(16)        .fontWeight(this.selectedIndex === index ? 500 : 400)        .lineHeight(22)        .margin({ top: 17, bottom: 7 })      Divider()        .strokeWidth(2)        .width(20)        .color('#007DFF')        .opacity(this.selectedIndex === index ? 1 : 0)    }.width(81)  }  build() {    Column(){      Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {        ForEach(this.tabs,(item: string, index:number)=>{          TabContent() {          }.tabBar(this.tabBuilder(index,item))        })
      }      .width('100%')      .height('auto')      .barMode(BarMode.Scrollable)      .divider({strokeWidth:1,color:Color.Gray}) //底部内容和tabs的分界线设置      .margin({top:60})      .onChange((index: number) => {        // currentIndex控制TabContent显示页签        this.currentIndex = index        this.selectedIndex = index        this.swiperController.changeIndex(index, true)      })
      Swiper(this.swiperController){        ForEach(this.tabs,(item: string, index:number)=>{          Stack(){            Text(item).fontColor(Color.Red).fontSize(24)          }.alignContent(Alignment.Center)          .backgroundColor(Color.Yellow)          .width('100%')          .height('100%')        })      }      .indicator(false) //设置可选导航点指示器样式      .height(200)      .loop(false)  //设置是否开启循环      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {        this.currentIndex = targetIndex        this.controller.changeIndex(targetIndex)      })      .disableSwipe(false) //设置禁用组件滑动切换功能。    }.width('100%')    .height('100%')    .backgroundColor(Color.White)
  }}