目录

1.底部导航

2.点击导航栏的时候点亮

3.新建tabbar对应的页面并加载

---

1.底部导航

@Entry
@Component
struct Index {@State message: string = '首页'@BuildertabBuilder(text:string,img:Resource) {//   未选中状态样式处理Column({ space: 5 }) {Image(img).width(25).borderRadius(25).padding(2).fillColor('#4bb0c4')Text(text).fontColor('#4bb0c4')}}build() {Column() {//  播放歌曲信息后面完成//  底部导航栏Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('推荐')}.tabBar(this.tabBuilder('推荐',$r('app.media.ic_recommend'))).backgroundColor(Color.Black)TabContent() {Text('发现')}.tabBar(this.tabBuilder('发现',$r('app.media.ic_find'))).backgroundColor(Color.Black)}.backgroundColor('#ff3b3b3b')}.height('100%').backgroundColor(Color.Black)}
}

自定义tabBuilder，使用Tabs组件实现，属性自行调整。

2.点击导航栏的时候点亮

@Entry
@Component
struct Index {@State currentIndex:number = 0 //页面加载的时候就应该把第一个tab点亮@BuildertabBuilder(text:string,img:Resource,index:number) {// 三元表达式// 条件成立?取值1:取值2Column({ space: 5 }) {Image(img).width(25).borderRadius(25).backgroundColor(this.currentIndex == index?'#d2577c':'').padding(2).fillColor(this.currentIndex == index?Color.White:'#4bb0c4')Text(text).fontColor(this.currentIndex == index?'#d2577c':'#4bb0c4')}}build() {Column() {//  播放歌曲信息后面完成//  底部导航栏Tabs({ barPosition: BarPosition.End }) {TabContent() {Text('推荐')}.tabBar(this.tabBuilder('推荐',$r('app.media.ic_recommend'),0)).backgroundColor(Color.Black)TabContent() {Text('发现')}.tabBar(this.tabBuilder('发现',$r('app.media.ic_find'),1)).backgroundColor(Color.Black)}.onChange((index:number)=>{console.log('当前索引',index)this.currentIndex = index}).backgroundColor('#ff3b3b3b')}.height('100%').backgroundColor(Color.Black)}
}

3.新建tabbar对应的页面并加载

新建4个页面。之后才能在TabContent内调用页面。

import { FindPage } from './FindPage'
import { MimePage } from './mimePage'
import { MomentPage } from './momentPage'
import { MuiscPage } from './muiscPage'
import { RecommendPage } from './recommendPage'
@Entry
@Component
struct Index {@State currentIndex:number = 0 //页面加载的时候就应该把第一个tab点亮@BuildertabBuilder(text:string,img:Resource,index:number) {// 三元表达式// 条件成立?取值1:取值2Column({ space: 5 }) {Image(img).width(25).borderRadius(25).backgroundColor(this.currentIndex == index?'#d2577c':'').padding(2).fillColor(this.currentIndex == index?Color.White:'#4bb0c4')Text(text).fontColor(this.currentIndex == index?'#d2577c':'#4bb0c4')}}build() {Column() {//  播放歌曲信息后面完成//  底部导航栏Tabs({ barPosition: BarPosition.End }) {TabContent() {RecommendPage()}.tabBar(this.tabBuilder('推荐',$r('app.media.ic_recommend'),0)).backgroundColor(Color.Black)TabContent() {FindPage()}.tabBar(this.tabBuilder('发现',$r('app.media.ic_find'),1)).backgroundColor(Color.Black)TabContent() {MuiscPage()}.tabBar(this.tabBuilder('muisc',$r('app.media.ic_logo'),2)).backgroundColor(Color.Black)TabContent() {MomentPage()}.tabBar(this.tabBuilder('动态',$r('app.media.ic_moment'),3)).backgroundColor(Color.Black)TabContent() {MinePage()}.tabBar(this.tabBuilder('我的',$r('app.media.ic_mine'),4)).backgroundColor(Color.Black)}.onChange((index:number)=>{console.log('当前索引',index)this.currentIndex = index}).backgroundColor('#ff3b3b3b')}.height('100%').backgroundColor(Color.Black)}
}

与List内只能使用ListItem类似，Tabs内只能使用TabContent。

设置参数currentIndex类型为number，初始为0，设置属性.onChange((index:number)=>{
this.currentIndex = index })，当点击某一TabContent时，将index赋值currentIndex，image设置三元判断表达式，判断背景颜色是否该变色。

.backgroundColor(this.currentIndex == index?'#d2577c':'')
.fillColor(this.currentIndex == index?Color.White:'#4bb0c4')