可参考如下简版示例import { One } from './view/One' import { Two } from './view/Two' import { Three } from './view/Three' class TabClass { title: string = '' index: number = 0 img?: ResourceStr selectedImg?: ResourceStr } const tabsData: TabClass[] = [ { title: 'One', index: 0, }, { title: 'Two', index: 1, }, { title: 'Three', index: 2, } ] @Entry @Component struct TabPage2 { private tabsController: TabsController = new TabsController(); @State currentIndex: number = 0; @Builder customBuilderTab(item: TabClass) { Column() { Text(item.title) .fontSize(this.currentIndex === item.index ? 15 : 12) .fontColor(this.currentIndex === item.index ? '#1698CE' : '#6B6B6B') .margin({ top: 5 }) } .width('100%') .height(50) .alignItems(HorizontalAlign.Center) .border({ width: { top: 0.5 }, color: Color.Grey }) .onClick(() => { this.currentIndex = item.index this.tabsController.changeIndex(this.currentIndex) }) } build() { Column() { Tabs({ barPosition: BarPosition.End ,controller:this.tabsController}) { TabContent() { One() }.tabBar(this.customBuilderTab(tabsData[0])) .onWillShow(() => { console.info("Pink will show") }) .onWillHide(() => { console.info("Pink will hide") }) TabContent() { Two() }.tabBar(this.customBuilderTab(tabsData[1])) TabContent() { Three() }.tabBar(this.customBuilderTab(tabsData[2])) } .animationDuration(0) .scrollable(false) .width('100%') .barHeight(50) } .width('100%') .height('100%') .backgroundColor(Color.White) } } 参考如下文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5\#onwillshow12
可参考如下简版示例
参考如下文档:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5\#onwillshow12