使用tab组件，来实现页面变化，@State进行渲染
使用@Builder来编写底部标签
页面代码
@Entry
@Component
struct IndexPage {
@State selectNum:number=0
@Builder
tarBarBuilder(name:string,img:Resource,index:number){
Column(){
Image(img).width(20).fillColor(this.selectNum===index?Color.Blue:Color.Black)
Text(name).width('100%').fontColor(this.selectNum===index?Color.Blue:Color.Black).textAlign(TextAlign.Center)
}
}
build() {
Tabs({index:0}){
TabContent(){
Text('找房')
}.tabBar(this.tarBarBuilder('找房',$r('app.media.ss5'),0))
TabContent(){
Text('圈子')
}.tabBar(this.tarBarBuilder('圈子',$r('app.media.circle5'),1))
TabContent(){
Text('我的房子')
}.tabBar(this.tarBarBuilder('我的房间',$r('app.media.house3'),2))
TabContent(){
Text('消息')
}.tabBar(this.tarBarBuilder('消息',$r('app.media.message5'),3))
TabContent(){
Text('个人中心')
}.tabBar(this.tarBarBuilder('个人中心',$r('app.media.person'),4))
}.onTabBarClick((index)=>{
this.selectNum=index
})
.barPosition(BarPosition.End)
}
}
效果图
点击底部标签可以更改内容，并使标签变颜色
