参考网址：自定义页签切换联动

1.自定义组件TabBarView

@Component
export struct TabBarView{@State currentIndex: number = 0@State selectedIndex: number = 0private controller: TabsController = new TabsController()//tab标签内容+横线布局@Builder tabBuilder(index: number, name: string) {Column() {Text(name).fontColor(this.selectedIndex === index ? '#007DFF' : '#182431').fontSize(18).fontWeight(this.selectedIndex === index ? 500 : 400).lineHeight(22).height('95%')Divider().strokeWidth(2).color('#007DFF').opacity(this.selectedIndex === index ? 1 : 0)}.backgroundColor(Color.White).width('100%').height('100%')}@Link arr: Array<string>@Builder tabItem(item: string) {}@BuilderParam item: (item: string) => void = this.tabItembuild() {Column() {Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {ForEach(this.arr, (item: string, index: number) => {TabContent() {this.item(item)}.tabBar(this.tabBuilder(index, item))}, (item: string, index: number) => index.toString())}.vertical(false).barMode(BarMode.Fixed).barWidth(360).barHeight(56).animationDuration(400).onChange((index: number) => {// currentIndex控制TabContent显示页签this.currentIndex = indexthis.selectedIndex = index}).onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {if (index === targetIndex) {return}// selectedIndex控制自定义TabBar内Image和Text颜色切换this.selectedIndex = targetIndex}).width('100%').height('100%').backgroundColor('#F1F3F5')}.width('100%')}
}

2.组件中使用

import { TabBarView } from "./TabBarView"
@Entry({routeName: 'IndexPage'})@Component
export struct IndexPage{@State arr: Array<string> = ['标签1', '标签2']@BuildertabItem(item: string){//在此处写各个标签对于的布局组件，可抽离出来使代码简洁if (item === this.arr[0]){//标签1组件}else if (item === this.arr[1]){//标签2组件}}build() {Column(){TabBarView({arr: this.arr, item: this.tabItem})}}
}

说明：我是根据官网提供的Tabs实例代码1（自定义页签切换联动）封装的简单使用（代码可直接使用），这种方式是为了复用。