鸿蒙项目实战（一）：实现首页动态Tab

需求：存在n个tab页，支持动态设置显示指定某几个tab

实现如下：

一、定义一个类，定义所有的tab页数据

知识点：

1、类使用export修饰，可以让其他模块引入

2、类内字段 设置 static readonly ，只读静态字段

3、图标文件存于src->main->resources->base->media目录下

// 首页菜单配置
export class TabConfig{// 供选择的所有tab集合// 只读 静态static readonly tabList = [{title:'首页',selectIcon:$r('app.media.icon_menu_home_press'),icon:$r('app.media.icon_menu_home_default'),},{title:'销售',selectIcon:$r('app.media.icon_menu_sale_press'),icon:$r('app.media.icon_menu_sale_unpress'),},{title:'客户',selectIcon:$r('app.media.icon_menu_customer_press'),icon:$r('app.media.icon_menu_customer_unpress'),},{title:'更多',selectIcon:$r('app.media.icon_menu_more_press'),icon:$r('app.media.icon_menu_more_unpress'),},]
}

二、创建一个page

1、定义两个字段：

 @State currentTabIndex: number = 0 // 当前tab下标@State currentTabs: object[] = [] // 当前显示的tab集合

 

2、定义自定义构建函数组件，实现自定义tab

// 自定义构建函数组件
@Builder mTabs(index: number, title: string, selectIcon: Resource, icon: Resource) {Column() {Image(this.currentTabIndex == index ? selectIcon : icon).width(28).height(28)Text(title).fontSize(14).margin({ top: 6 })}.justifyContent(FlexAlign.Center).width('100%').height('100%').padding({ top: 6, bottom: 4 })}

 

3、在生命周期方法里动态设置需要显示的tab

 aboutToAppear() {this.setTabs(['首页', '客户', '更多'])}// 动态设置需要显示的tabsetTabs(tab: string[]) {this.currentTabs = []for (let i = 0; i < tab.length; i++) {let index = TabConfig.tabList.findIndex((item) => {return item.title === tab[i]})if (index != -1) {this.currentTabs.push(TabConfig.tabList[index])}}}

 

4、设置ui部分

build() {Tabs() {ForEach(this.currentTabs, (item, index) => {TabContent() {Text('这是' + item.title + '页面')}.tabBar(this.mTabs(index, item.title, item.selectIcon, item.icon))})}.barPosition(BarPosition.End).width('100%').height('100%').barHeight(60).onChange((index:number)=>{this.currentTabIndex = index //改变当前选中的tab下标}).barMode(BarMode.Fixed) // 不可滑动}

 

相关文档：

自定义构建函数@Builder

选项卡Tabs

完整代码：

// 首页
import { TabConfig } from '../common/config/TabConfig'

@Entry
@Component
struct Main {
  @State currentTabIndex: number = 0 // 当前tab下标
  @State currentTabs: object[] = [] // 当前显示的tab集合
  //
  aboutToAppear() {
    this.setTabs(['首页', '客户', '更多'])
  }
  // 动态设置需要显示的tab
  setTabs(tab: string[]) {
    this.currentTabs = []
    for (let i = 0; i < tab.length; i++) {
      let index = TabConfig.tabList.findIndex((item) => {
        return item.title === tab[i]
      }
      )
      if (index != -1) {
        this.currentTabs.push(TabConfig.tabList[index])
      }
    }
  }

  build() {
    Tabs() {
      ForEach(this.currentTabs, (item, index) => {
        TabContent() {
          Text('这是' + item.title + '页面')
        }
        .tabBar(this.mTabs(index, item.title, item.selectIcon, item.icon))
      })
    }
    .barPosition(BarPosition.End)
    .width('100%')
    .height('100%')
    .barHeight(60)
    .onChange((index:number)=>{
      this.currentTabIndex = index
    })
    .barMode(BarMode.Fixed) // 不可滑动
  }
  // 自定义构建函数组件
  @Builder mTabs(index: number, title: string, selectIcon: Resource, icon: Resource) {
    Column() {
      Image(this.currentTabIndex == index ? selectIcon : icon)
        .width(28)
        .height(28)
      Text(title)
        .fontSize(14)
        .margin({ top: 6 })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
    .padding({ top: 6, bottom: 4 })
  }
}