封装tab组件

定义接口类型

对应tab名字与图片

export interface TabClass{
  name:string
  title:string
}

造数据填充tabs

@State
tabsData: TabClass[] = [{
  name: 'waiting',
  title: 'wait'
},{
  name: 'line',
  title: 'line'
},{
  name: 'finish',
  title: 'finish'
}]

遍历数组填充tab

Stack({ alignContent: Alignment.Top }) {
  Tabs({ barPosition: BarPosition.Start, index: $$this.currentIndex }) {
    ForEach(this.tabsData, (item: TabClass) => {
      TabContent(){
        Text(item.title)
      }.tabBar(item.title)
    })
  }.backgroundColor($r('app.color.background_page')).animationDuration(300)
  

}