HarmonyOS开发案例：用Tabs组件创建APP导航页签

 这个代码框选的是TPS，因为里面最接近HarmonyOS的就是Typescript了

想预览的话直接复制到HarmonyOS 的开发工具中，图片换成自己的图片路径就可以运行预览了

import Home from '../view/Home'
 
@Entry
@Component
struct subTab {
  @State onIndex: number = 0
  private controller: TabsController = new TabsController()
 
  @Builder TabBuider(index: number, img_1: Resource, img_2: Resource, title: string) {
 
    Stack() {
      Image(this.onIndex === index ? img_1 : img_2)
        .interpolation(ImageInterpolation.High)
        .width(this.onIndex === index ? 70 : 40)
        .height(this.onIndex === index ? 70 : 40)
        .margin(this.onIndex === index ? { bottom: 10 } : { bottom: 20 })
        .animation({duration:500})
      Text(title).fontSize(14)
        .opacity(this.onIndex === index ? 0 : 1)
        .fontColor(this.onIndex === index ? '#ff7c1818' : '#ff0000')
        .margin(this.onIndex === index ? { top: 50 } : { top: 35 })
        .fontSize(14)
        .animation({duration:500})
    }.height('100%').width('100%')
  }
  build() {
    Row() {
      Column() {
        Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
          TabContent() {
            Home()
          }.tabBar(this.TabBuider(0, $r('app.media.fengjing_2'), $r('app.media.fengjing_2'), '首页'))
 
          TabContent() {
 
          }.tabBar(this.TabBuider(1, $r('app.media.shoping_03'), $r('app.media.shoping_03'), '商城'))
 
          TabContent() {
 
          }.tabBar(this.TabBuider(2, $r('app.media.center'), $r('app.media.center'), '会员'))
 
          TabContent() {
 
          }.tabBar(this.TabBuider(3, $r('app.media.kanguolai'), $r('app.media.kanguolai'), '消息'))
 
          TabContent() {
 
          }.tabBar(this.TabBuider(4, $r('app.media.xindong_2'), $r('app.media.xindong_2'), '我的'))
        }
        .barHeight(60).barWidth('100%')
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          this.onIndex = index
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}