HarmonyOS 鸿蒙Next 如何实现底部tabbar放不下6个时弹出菜单并避免冲突

可以通过定义数据集，将后台传入的数据放到这个数据集中，后续给Tabs调用，写了一个小demo，可以参考一下

interface TabTemp {
  name: string
  index: number
}

@Entry
@Component
struct TabContentExample {
  fontColor: string = '#182431'
  selectedFontColor: string = '#007DFF'
  currentIndex: number = 0
  dataItems:Array<TabTemp>=[{
    name:"tab1",
    index:0
  }, {
    name:"tab2",
    index:1
  }, {
    name:"tab3",
    index:2
  }]
  private controller: TabsController = new TabsController()
  @Builder tabBuilder(index: number) {
    Column() {
      Image(this.currentIndex === index ? '/common/public_icon_on.svg' : '/common/public_icon_off.svg')
        .width(24)
        .height(24)
        .margin({ bottom: 4 })
        .objectFit(ImageFit.Contain)
      Text(`Tab${index + 1}`)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(10)
        .fontWeight(500)
        .lineHeight(14)
    }.width('100%')
  }
  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End,
        controller: this.controller
      }) {
        ForEach(this.dataItems,(item:TabTemp)=>{
          TabContent() {
            Column() {
              Text(item.name)
                .fontSize(36)
                .fontColor('#182431')
                .fontWeight(500)
                .opacity(0.4)
                .margin({ top: 30, bottom: 56.5 })
              Divider()
                .strokeWidth(0.5)
                .color('#182431')
                .opacity(0.05)
            }.width('100%')
          }.tabBar(this.tabBuilder(item.index))
        })
      }
      .vertical(false)
      .barHeight(56)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(190)
      .backgroundColor('#F1F3F5')
      .margin({ top: 38 })
    }.width('100%')
  }
}