可以参考这个示例:@Entry @Component struct TabsExample1 { @State tabArray: Array<number> = [0, 1, 2, 3, 4] @State focusIndex: number = 0 @State pre: number = 0 @State index: number = 0 private controller: TabsController = new TabsController() @State test: boolean = false // 单独的页签 @Builder Tab(tabName: string, tabItem: number, tabIndex: number) { Row({ space: 20 }) { Text(tabName).fontSize(18) } .justifyContent(FlexAlign.Center) .constraintSize({ minWidth: 35 }) .width(100) .height(60) .borderRadius({ topLeft: 10, topRight: 10 }) .onClick(() => { this.controller.changeIndex(tabIndex) this.focusIndex = tabIndex }) } build() { Column() { Column() { // 页签 Row({ space: 7 }) { Scroll() { Row() { ForEach(this.tabArray, (item: number, index: number) => { this.Tab("页签 " + item, item, index) }) } .width('auto') .justifyContent(FlexAlign.SpaceBetween) } .align(Alignment.Start) .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .width('90%') Image($r('app.media.startIcon')) .size({ height: 20, width: 20 }) } .alignItems(VerticalAlign.Center) .width('100%') } .alignItems(HorizontalAlign.Start) .width('100%') //tabs Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { ForEach(this.tabArray, (item: number, index: number) => { TabContent() { Text('我是页面 ' + item + " 的内容") .height(300) .width('100%') .fontSize(30) } .backgroundColor(Color.Pink) }) } .width('100%') .barHeight(0) .animationDuration(100) .onChange((index: number) => { console.log('foo change') this.focusIndex = index }) } .height('100%') } }
可以参考这个示例: