官方文档：选项卡 (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@BuildertabBuilder(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@BuildertabBuilder(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 = 2private controller: TabsController = new TabsController()@BuildertabBuilder(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) % 4this.controller.changeIndex(index)})}.width('100%')}
}
)
(189))
