阅读量:9
官方文档：选项卡 (Tabs)
目录标题
底部导航
@Entry @Component struct Bujv_tabs { build() { Column() { Tabs({ barPosition: BarPosition.End }) { TabContent() { Text('首页的内容').fontSize(30) }.tabBar('首页') TabContent() { Text('推荐的内容').fontSize(30) }.tabBar('推荐') TabContent() { Text('发现的内容').fontSize(30) }.tabBar('发现') TabContent() { Text('我的内容').fontSize(30) }.tabBar("我的") } } .width('100%') } } 顶部导航
Tabs({ barPosition: BarPosition.Start }) 侧边导航
Tabs({ barPosition: BarPosition.Start }) { } .vertical(true) .barWidth(100) .barHeight('100%') 限制导航栏的滑动切换
.scrollable(false) 固定导航栏・可滚动导航栏
.barMode(BarMode.Fixed) // 固定导航栏 .barMode(BarMode.Scrollable) // 可滚动导航栏 自定义导航栏
@Entry @Component struct Bujv_tabs { @State currentIndex: number = 0 @Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) { Column() { Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({ width: 25, height: 25 }) Text(title).fontColor(this.currentIndex === targetIndex ? Color.Red : Color.Black) } .width('100%') .height(50) .justifyContent(FlexAlign.Center) } build() { Column() { Tabs({ barPosition: BarPosition.Start }) { TabContent() { Column() { Text('我的内容') }.width('100%').height('100%').backgroundColor(Color.Pink) } .tabBar(this.tabBuilder('我的', 0, $r('app.media.fuel'), $r('app.media.foods'))) } } .width('100%') } } 切换至指定页签
在使用了自定义导航栏后，默认的Tabs仅实现滑动内容页和点击页签时内容页的切换逻辑，页签的切换逻辑需要自行实现。
@Entry @Component struct Bujv_tabs { @State currentIndex: number = 2 @Builder tabBuilder(title: string, targetIndex: number) { Column() { Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B') } } build() { Column() { Tabs({ barPosition: BarPosition.End }) { TabContent() { Text('首页的内容').fontSize(30) }.tabBar(this.tabBuilder('首页', 0)) TabContent() { Text('推荐的内容').fontSize(30) }.tabBar(this.tabBuilder('推荐', 1)) TabContent() { Text('发现的内容').fontSize(30) }.tabBar(this.tabBuilder('发现', 2)) TabContent() { Text('我的内容').fontSize(30) }.tabBar(this.tabBuilder("我的", 3)) } .animationDuration(2) .backgroundColor('#F1F3F5') .onChange((index: number) => { this.currentIndex = index }) } .width('100%') } } TabsController是Tabs组件的控制器，用于控制Tabs组件进行内容页切换。
@Entry @Component struct Bujv_tabs { @State currentIndex: number = 2 private controller: TabsController = new TabsController() @Builder tabBuilder(title: string, targetIndex: number) { Column() { Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B') } } build() { Column() { Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) { TabContent() { Text('首页的内容').fontSize(30) }.tabBar(this.tabBuilder('首页', 0)) TabContent() { Text('推荐的内容').fontSize(30) }.tabBar(this.tabBuilder('推荐', 1)) TabContent() { Text('发现的内容').fontSize(30) }.tabBar(this.tabBuilder('发现', 2)) TabContent() { Text('我的内容').fontSize(30) }.tabBar(this.tabBuilder("我的", 3)) } .animationDuration(2) .backgroundColor('#F1F3F5') .height(600) .onChange((index: number) => { this.currentIndex = index }) Button('动态修改index').width('50%').margin({ top: 20 }) .onClick(() => { this.currentIndex = (this.currentIndex + 1) % 4 }) Button('changeIndex').width('50%').margin({ top: 20 }) .onClick(() => { let index = (this.currentIndex + 1) % 4 this.controller.changeIndex(index) }) } .width('100%') } } 