1. 封装 TabsComp 组件

/// 自定义选项卡组件
@Component
export default struct TabsComp {
  private tabsController: TabsController = new TabsController()
  // 选项卡下标，默认为第一个
  @Link selectIndex: number
  @Prop tabTitles: string[]
  // @BuilderParam 该装饰器用于声明任意UI描述的一个元素，类似slot占位符。
  // 用于传入代码块/函数，类似于block
  // 自定义组件插槽（方便外部调用时传入其他子组件），() => void 表示变量是函数类型（一般是构造函数）
  @BuilderParam child: () => void
  // tabBar 背景颜色
  tabBarColor: ResourceColor = Color.White

  build() {
    Column() {
      // barPosition设置Tabs的页签位置，跟vertical属性强关联
      // index设置初始页签索引
      // controller设置Tabs控制器，用于控制Tabs组件进行页签切换
      Tabs({ barPosition: BarPosition.Start, index: this.selectIndex, controller: this.tabsController }) {
        ForEach(this.tabTitles, (title: string, index) => {
          TabContent() {
            this.child() // 在这里插入额外的子组件
          }
          // 系统TabBar（带过渡动画）
          .tabBar(new SubTabBarStyle(title))
        })
      }
      // 可滚动导航栏
      .barMode(BarMode.Scrollable)
      .barBackgroundColor(this.tabBarColor)
      .animationDuration(300)
      // 滑动切换导航栏
      .onChange((index) => {
        // 监听索引index的变化，实现页签内容的切换。
        this.selectIndex = index
      })
    }
    .height('100%')
    .width('100%')
  }
}

2. 组件使用

import TabsComp from '../../components/TabsComp'

@Entry
@Component
export default struct TestPage {
  @State selectIndex: number = 0
  @State tabTitles: string[] = ['菜单1', '菜单2', '菜单3', '菜单4', '菜单5']

  build() {
    Column() {
      TabsComp({ selectIndex: this.selectIndex, tabTitles: this.tabTitles }) {
        Text(`${this.tabTitles[this.selectIndex]}-内容页`).fontSize(30)
      }
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f1f2f3')
  }
}

3. 效果