Tabs组件目前暂不支持自定义页签布局。要实现导航栏自定义布局,可以通过其他组件和Tabs组件或Swiper组件联动实现。可以参考文档demo:https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-5-V5或以下demo@Entry @Component struct Drag2 { @State tabArray: Array<number> = [0, 1] @State countArray: Array<number> = [87, 100] @State tabTitels: Array<string> = ['转发', '评论', '赞'] @State focusIndex: number = 0 @State index: number = 0 private controller: TabsController = new TabsController() // 单独的页签 @Builder Tab(tabName: string, tabItem: number, tabIndex: number, count: number) { Row({ space: 5 }) { Text(tabName).fontSize(18) .fontColor(tabIndex === this.focusIndex ? Color.Black : Color.Grey) Text(count + '').fontSize(18) .fontColor(tabIndex === this.focusIndex ? Color.Black : Color.Grey) } .constraintSize({ minWidth: 35 }) .width(60) .height(30) .onClick(() => { console.log('sadsaadssa') this.controller.changeIndex(tabIndex) this.focusIndex = tabIndex }) } build() { Column() { Column() { // 页签 Row({ space: 5 }) { Scroll() { Row() { ForEach(this.tabArray, (item: number, index: number) => { this.Tab(this.tabTitels[index], item, index, this.countArray[index]) }) } .width('45%') .justifyContent(FlexAlign.SpaceBetween) } .align(Alignment.Start) .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .width('80%') // 在左的两个占总宽度的比例 this.Tab("赞", 2, 2, 50); } .width('100%') //tabs Tabs({ barPosition: BarPosition.Start, controller: this.controller }) { TabContent() { // TabComponent1() } TabContent() { // TabComponent2(); } TabContent() { Text('我是页面 ').height(300).width('100%').fontSize(30) } } .barHeight(0) .scrollable(false) .animationDuration(100) .onChange((index: number) => { console.log('foo change') this.focusIndex = index }) } } } }
Tabs组件目前暂不支持自定义页签布局。要实现导航栏自定义布局,可以通过其他组件和Tabs组件或Swiper组件联动实现。
可以参考文档demo:https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-5-V5
或以下demo