tabs页面开发

import { Home } from '../view/Home'
import { Product } from '../view/Product'
import { Cart } from '../view/Cart'
import { Personal } from '../view/Personal'

@Entry
@Component
struct Page13_Index {

  @State currentIndex:number = 0

  @Builder tabBuilder( title:string, targetIndex:number, selectImg:Resource, normalImg:Resource ){
    Column({space:3}){
      Image(this.currentIndex === targetIndex ? selectImg : normalImg).size({width:25,height:25})
      Text(title).fontColor(this.currentIndex === targetIndex ? Color.Red : Color.Black)
    }
  }


  build() {
    Row() {
      Column() {
        Tabs({barPosition: BarPosition.End}) {
          TabContent() {
            // Text('首页的内容').fontSize(30)
           Home()
          }
          .tabBar(this.tabBuilder('首页',0,$r('app.media.icon'),$r('app.media.icon')))

          TabContent() {
            // Text('推荐的内容').fontSize(30)
            Product()
          }
          .tabBar(this.tabBuilder('推荐',1,$r('app.media.icon'),$r('app.media.icon')))

          TabContent() {
            // Text('发现的内容').fontSize(30)
            Cart()
          }
          .tabBar(this.tabBuilder('发现',2,$r('app.media.icon'),$r('app.media.icon')))

          TabContent() {
            // Text('我的内容').fontSize(30)
            Personal()
          }
          .tabBar(this.tabBuilder('我的',3,$r('app.media.icon'),$r('app.media.icon')))

        }.onChange(index => {
          this.currentIndex = index
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}