#鸿蒙通关秘籍#如何通过BaseTabBar实现鸿蒙应用底部导航栏？

BaseTabBar实现步骤如下：

1. 创建TabContent和TabBarBuilder方法。
2. 使用Tabs组件定义各个tab及其内容。
3. 样式设置：
   • 禁用左右滑动和动画。
   • 根据当前索引改变tabbar的显示状态。

代码实现如下：

import { OnePage } from './one/OnePage';
import { TwoPage } from './two/TwoPage';
import { ThreePage } from './three/ThreePage';
import { FourPage } from './four/FourPage';

export interface TabType {
  text: string,
  imgPath: string,
}

@Preview
@Entry
@Component
export struct BaseTabBar {
  @State currentIndex: number = 0
  tabsController: TabsController = new TabsController()
  tabList: TabType[] = [{
    imgPath: 'tab/nav_tab_1',
    text: '微信',
  }, {
    text: '通讯录',
    imgPath: 'tab/nav_tab_2',
  }, {
    text: '发现',
    imgPath: 'tab/nav_tab_3',
  }, {
    text: '我的',
    imgPath: 'tab/nav_tab_4',
  }]

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        ForEach(this.tabList, (item: TabType, index: number) => {
          TabContent() {
            if (index == 0) {
              OnePage()
            } else if (index == 1) {
              TwoPage()
            } else if (index == 2) {
              ThreePage()
            } else {
              FourPage()
            }
          }
          .tabBar(this.TabBarBuilder(item.text, index, $rawfile(`${item.imgPath}.png`),
            $rawfile(`${item.imgPath}_on.png`)))
        })
      }
      .scrollable(false)
      .animationDuration(0)
      .onChange((index: number) => {
        this.currentIndex = index
        this.tabsController.changeIndex(this.currentIndex)
      })
    }
    .backgroundColor("#eeeeee")
    .width('100%')
    .height('100%')
  }

  @Builder
  TabBarBuilder(title: string, index: number, normalImg: Resource, selectedImg: Resource) {
    Column() {
      Image(this.currentIndex == index ? selectedImg : normalImg)
        .width(24)
        .height(24)

      Text(title)
        .fontSize(14)
        .margin({ top: 4 })
        .fontColor(this.currentIndex == index ? '#45C461' : '#999999')
    }
    .backgroundColor(Color.White)
    .width('100%')
    .height(50)
    .padding({ top: 6, bottom: 6 })
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .id(`tabBar${index}`)
  }
}