封装tabs-new

import router from '@ohos.router'
import { Choice } from '../view/ChoicePage';
import { Home } from '../view/HomePage';
import { Mine } from '../view/MinePage';
@Entry
@Component
struct Index {

  private controller: TabsController = new TabsController();

  private items:Array<{title:string,iconSelected:Resource,iconNormal:Resource}> = [
    {
      title:'首页',
      iconSelected:$r('app.media.ic_home_selected'),
      iconNormal:$r('app.media.ic_home_normal'),
    },
    {
      title:'精选',
      iconSelected:$r('app.media.ic_discover_selected'),
      iconNormal:$r('app.media.ic_discover_normal'),
    },
    {
      title:'我的',
      iconSelected:$r('app.media.ic_mine_selected'),
      iconNormal:$r('app.media.ic_mine_normal'),
    },
  ]

  @State CurrentIndex:number = 0

  // 自定义构造函数
  @Builder TabBuilder(title,iconSelected,iconNormal,index) {
    Column(){
      Image( this.CurrentIndex === index ? iconSelected : iconNormal).width(25).height(25)
      Text(title).fontSize(14).fontWeight(500).fontColor(this.CurrentIndex === index ? '#007dee' : '#182431')
    }.width('100%')
  }

  build() {
    Row() {
       Tabs({
         barPosition:BarPosition.End
       }){

         ForEach(this.items,(item:{title:string,iconSelected:Resource,iconNormal:Resource},index:number) => {
           TabContent(){
             if(index === 0) {
               Home()
             }else if (index === 1 ) {
               Choice()
             }else if (index === 2 ) {
              Mine()
             }
           }.tabBar(this.TabBuilder(item.title,item.iconSelected,item.iconNormal,index))
         },(item:{title:string}) => JSON.stringify(item))

       }.onChange((index:number) => {
         this.CurrentIndex = index
       })
    }
    .height('100%')
  }
}