请参考demo:@Entry @Component struct TabsExample { @State fontColor: string = '#182431' @State selectedFontColor: string = '#007DFF' @State currentIndex: number = 5 @State currentIndex2: number = (this.currentIndex ) % 4 private controller: TabsController = new TabsController() @Builder tabBuilder(index: number, name: string) { Column() { Text(name) .fontColor(this.currentIndex2 === index ? this.selectedFontColor : this.fontColor) .fontSize(16) .fontWeight(this.currentIndex2 === index ? 500 : 400) .lineHeight(22) .margin({ top: 17, bottom: 7 }) Divider().strokeWidth(2).color('#007DFF').opacity(this.currentIndex2 === index ? 1 : 0) } .width('50%') } build() { Column() { Tabs({ barPosition: BarPosition.Start, index: this.currentIndex2, controller: this.controller }) { TabContent() { Column().width('100%').height('100%').backgroundColor('#00CB87') }.tabBar(this.tabBuilder(0, 'green')) TabContent() { Column().width('100%').height('100%').backgroundColor('#007DFF') }.tabBar(this.tabBuilder(1, 'blue')) TabContent() { Column().width('100%').height('100%').backgroundColor('#FFBF00') }.tabBar(this.tabBuilder(2, 'yellow')) TabContent() { Column().width('100%').height('100%').backgroundColor('#E67C92') }.tabBar(this.tabBuilder(3, 'pink')) } .vertical(false) .barMode(BarMode.Scrollable) .barWidth(360) .barHeight(56) .animationDuration(400) .onChange((index: number) => { this.currentIndex2 = index }) .width(360) .height(296) .margin({ top: 52 }) .backgroundColor('#F1F3F5') } .width('100%') } }
请参考demo: