＃放码来战．端云一体化开发＃HarmonyOS 5 【农民叔叔】12.【端侧工程】Tabs容器组件页签导航栏 原创

@Builder
  TabBuilder(title:string,index:number,selectedImg:Resource,normalImg:Resource){
    Column(){
      Image(this.currentIndex===index?selectedImg:normalImg)
        .width(25)
        .height(25)
      Text(title)
        .margin({top:4})
        .fontSize(10)
        .fontColor(this.currentIndex=== index?'#1698CE':'#6B6B6B')
    }
    .justifyContent( FlexAlign.Center)
    .height('100%')
    .width('100%')
  }

TabContent() {
        // TODO:添加内容页
      }
      .tabBar(
        this.TabBuilder('首页', 0,
          $r('app.media.icon_home_selected'),
          $r('app.media.icon_home_normal')))

import HomePage from './HomePage';
import MinePage from './MinePage';

@Entry
@Component
struct MainPage {
  @State currentIndex: number = 0; // 当前选中的tab索引，默认首页

  build() {
    Tabs({ barPosition: BarPosition.End, index: 0 }) {
      TabContent() {
        // TODO:添加内容页
      }
      .tabBar(
        this.TabBuilder('首页', 0,
          $r('app.media.icon_home_selected'),
          $r('app.media.icon_home_normal')))

      TabContent() {
        // 我的
        MinePage()
      }
      .tabBar(this.TabBuilder('我的', 1, $r('app.media.icon_mine_selected'), $r('app.media.icon_mine_normal')))
    }
    .vertical(false)
    .backgroundColor(Color.White)
    .barMode(BarMode.Fixed)
    .scrollable(false)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }

  @Builder
  TabBuilder(title: string, index: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === index ? selectedImg : normalImg)
        .width(25)
        .height(25)
      Text(title)
        .margin({ top: 4 })
        .fontSize(10)
        .fontColor(this.currentIndex === index ? '#1698CE' : '#6B6B6B')
    }
    .justifyContent(FlexAlign.Center)
    .height('100%')
    .width('100%')
  }
}