基本用法

@Entry
@Component
struct TabbarDemo {
  build() {
    Tabs() { // 顶级容器
      TabContent() {
        // 内容区域：只能有一个子组件
      }
      .tabBar('首页') // 导航栏
    }
    .属性
  }
}

属性

1.vertical:设置导航栏水平或者垂直

2.barPosition:调整导航栏的位置，开头或者结尾

3.scrollable：调整是否允许滑动切换

4.animationDuration：设置动画时间，单位（ms）

滚动导航栏

可以通过 Tabs 组件的 barMode 属性即可调整 固定导航栏 或 滚动导航栏

基本用法

Tabs(){
  // 内容略
}
  .barMode(BarMode.Scrollable)// 滚动
  // .barMode(BarMode.Fixed)// 默认值

自定义taBer

需要用到自定义构建函数来实现

Tabs() {
    TabContent() {
        // 内容略
    }
    .tabBar(this.tabBarBuilder())
  }

@Builder
tabBarBuilder() {
  // 自定义的Tabbar结构
}

Tabs组件的事件

名称	功能描述
onChange(event: (index: number) => void)	Tab页签切换后触发的事件。- index：当前显示的index索引，索引从0开始计算。滑动切换、点击切换 均会触发
onTabBarClick(event: (index: number) => void)10+	Tab页签点击后触发的事件。- index：被点击的index索引，索引从0开始计算。

应用

@Entry
@Component
struct TabsDemo02 {
  build() {
    Tabs() {
      TabContent() {
        Text('首页')
      }
      .tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_2'), '购物车'))

      TabContent() {
        Text('搜索')
      }
      .tabBar(this.tabBarBuilder($r('app.media.ic_tabbar_icon_3'), '我的'))
    }
    .barPosition(BarPosition.End)
    .onChange((index) => {
      console.log('onChange-index:', index)
    })
    .onTabBarClick((index) => {
      console.log('tabBarClick-index:', index)
    })
  }

  @Builder
  tabBarBuilder(img: ResourceStr, text: string) {
    Column() {
      Image(img)
        .width(30)
      Text(text)
    }
  }
}