@Entry @Component struct Index { @State tabArray: Array<number> = [0, 1] @State focusIndex: number = 0 private controller: TabsController = new TabsController() // 自定义页签 @Builder Tab(tabName: string, tabItem: number, tabIndex: number) { Column({ space: 20 }) { Text(tabName).fontSize(18) } .backgroundColor(Color.Orange) .width(100) .height(60) .onClick(() => { this.controller.changeIndex(tabIndex) this.focusIndex = tabIndex }) .backgroundColor(tabIndex === this.focusIndex ? Color.Orange : Color.White) } build() { Column() { Column() { // 页签 Row({ space: 6 }) { Scroll() { Row() { ForEach(this.tabArray, (item: number, index: number) => { this.Tab("页" + item, item, index) }) } .justifyContent(FlexAlign.Start) } // 设置左对齐 .align(Alignment.Start) .scrollable(ScrollDirection.Horizontal) .scrollBar(BarState.Off) .width('80%') .backgroundColor("#ffb7b7b7") } .width('100%') .backgroundColor("#ffb7b7b7") // 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) }) } // 是否允许左右滑动 .scrollable(false) .barHeight(0) .animationDuration(100) .onChange((index: number) => { console.log('foo change') this.focusIndex = index }) } .alignItems(HorizontalAlign.Start) .width('100%') } .height('100%') } }
鸿蒙中自定义tabs
最新推荐文章于 2024-08-13 20:17:46 发布