一、初级版本

import { CartPage } from './CartPage'
import { HomePage } from './HomePage'
import { SortPage } from './SortPage'

interface TabItem {
  title:string
  icon:ResourceStr
  activeIcon:ResourceStr
}
@Entry
@Component
struct Index {
  // 底部导航栏索引
  @State activeIndex:number = 0
  // 底部导航栏数据
  @State tabItems:TabItem[] = [
    { title:'首页', icon: $r('app.media.ic_home'), activeIcon: $r('app.media.ic_home_active') },
    { title:'分类', icon: $r('app.media.ic_sort'), activeIcon: $r('app.media.ic_sort_active') },
    { title:'购物车', icon: $r('app.media.ic_cart'), activeIcon: $r('app.media.ic_cart_active') },
    { title:'我的', icon: $r('app.media.ic_my'), activeIcon: $r('app.media.ic_my_active') }
  ]
  //  底部导航栏
  @Builder
  tabBarBuilder(item:TabItem,index:number){
    Column({ space:6 }){
      Image(this.activeIndex === index ? item.activeIcon : item.icon)
        .width(24)
        .height(24)
      Text(item.title)
        .fontSize(14)
        .fontColor(this.activeIndex === index ? '#363636' : Color.Gray)
    }
  }
  @Builder
  CenterBuilder(){
    Row(){
      Image($r('sys.media.ohos_ic_public_add'))
        .width(24)
        .height(24)
    }
  }
  build() {
    Tabs({ barPosition:BarPosition.End,index:$$this.activeIndex }){
      ForEach(this.tabItems,(item:TabItem,index:number)=>{
        TabContent(){
          if (index === 0){
            HomePage()
          }else if (index === 1){
            SortPage()
          }else if (index === 2){
            CartPage()
          }else if (index === 3){
            CartPage()
          }
        }.tabBar(this.tabBarBuilder(item,index))
      })
    }
  }
}

 二、高级版本

import { CartPage } from './CartPage'
import { HomePage } from './HomePage'
import { MyPage } from './MyPage'
import { PublicPage } from './PublicPage'
import { SortPage } from './SortPage'

interface TabItem {
  title:string
  icon:ResourceStr
  activeIcon:ResourceStr
}
@Entry
@Component
struct Index {
  // 底部导航栏索引
  @State activeIndex:number = 0
  // 底部导航栏数据
  @State tabItems:TabItem[] = [
    { title:'首页', icon: $r('app.media.ic_home'), activeIcon: $r('app.media.ic_home_active') },
    { title:'分类', icon: $r('app.media.ic_sort'), activeIcon: $r('app.media.ic_sort_active') },
    { title:'购物车', icon: $r('app.media.ic_cart'), activeIcon: $r('app.media.ic_cart_active') },
    { title:'我的', icon: $r('app.media.ic_my'), activeIcon: $r('app.media.ic_my_active') }
  ]
  //  底部导航栏
  @Builder
  tabBarBuilder(item:TabItem,index:number){
    Column({ space:6 }){
      Image(this.activeIndex === index ? item.activeIcon : item.icon)
        .width(24)
        .height(24)
      Text(item.title)
        .fontSize(14)
        .fontColor(this.activeIndex === index ? '#363636' : Color.Gray)
    }
  }
  @Builder
  CenterBuilder(){
    Row(){
      Text('+')
        .width(60)
        .height(45)
        .fontColor(Color.White)
        .fontSize(30)
        .fontWeight(500)
        .textAlign(TextAlign.Center)
    }.backgroundColor('#ff2442')
    .borderRadius(10)
  }
  build() {
    Tabs({ barPosition:BarPosition.End,index:$$this.activeIndex }){
      TabContent(){
        HomePage()
      }.tabBar(this.tabBarBuilder(this.tabItems[0],0))
      TabContent(){
        SortPage()
      }.tabBar(this.tabBarBuilder(this.tabItems[1],1))
      TabContent(){
        PublicPage()
      }.tabBar(this.CenterBuilder())
      TabContent(){
        CartPage()
      }.tabBar(this.tabBarBuilder(this.tabItems[2],3))
      TabContent(){
        MyPage()
      }.tabBar(this.tabBarBuilder(this.tabItems[3],4))
    }
  }
}