最終效果圖

bottomtab.png

底部tab欄、底部導航和badge全部代碼：

import { BSNav } from '../../../components/BSNav'
import { BSButton, BSText } from '../../../components/BSUI'
@Entry
@Component
struct BottomTabBarPage {
  @State currentIndex: number = 0

  @Builder TabBuilder(index: number, title: string,icon: Resource, activeIcon: Resource) {

    Column() {

      if (index === 2){
        //badge代碼
        Badge({
          count:5,
          position:BadgePosition.RightTop,
          style:{badgeSize:20,badgeColor:'#F33F3F'}
        }){
          Image(this.currentIndex === index ?  activeIcon : icon )
            .width(54)
            .height(24)
            .margin({ bottom: 4 })
            .objectFit(ImageFit.Contain)
            // .backgroundColor(Color.Orange)
        }
      }else {
        Image(this.currentIndex === index ?  activeIcon : icon )
          .width(54)
          .height(24)
          .margin({ bottom: 4 })
          .objectFit(ImageFit.Contain)
          // .backgroundColor(Color.Pink)
      }

      Text(title)
        .fontColor(this.currentIndex === index ? '#F33F3F': '#999999')
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {

          BSButton({title:'返回'})
            .height(44)
            .width('50%')
            .onClick(()=>{
              BSNav.back()
            })

        }.tabBar(this.TabBuilder(0,'首頁',$r('app.media.icon_tab_home_default'),$r('app.media.icon_tab_home_selected')))

        TabContent() {
          BSText({title:'分類',fontColor:'#333333',fontSize:15})
        }.tabBar(this.TabBuilder(1,'分類',$r('app.media.icon_tab_item_default'),$r('app.media.icon_tab_item_selected')))

        TabContent() {
          BSText({title:'購物車',fontColor:'#333333',fontSize:15})
        }.tabBar(this.TabBuilder(2,'購物車',$r('app.media.icon_tab_shopping_default'),$r('app.media.icon_tab_shopping_selected')))

        TabContent() {
          BSText({title:'我的',fontColor:'#333333',fontSize:15})


        }.tabBar(this.TabBuilder(3,'我的',$r('app.media.icon_tab_mine_default'),$r('app.media.icon_tab_mine_selected')))
      }
      .scrollable(false)
      .onChange((index: number) => {
        console.info(index.toString())
        this.currentIndex = index
      })
      .width('100%')
      .backgroundColor(0xF1F3F5)
    }
  }
}

ps:
1嫁蛇、BS開頭的API是為了方便開發(fā)和維護锨并，對鴻蒙UI做了一層簡單的封裝，并且會陸續(xù)進行更新.
2棠众、基于API Version9版本.
3琳疏、看到文章覺得還OK麻煩留個贊??謝謝啦～