HarmonyOS Tabs点击tab项,如何能做到点击tab标签控制，不切换内容？

Question

Tabs点击tab项,如何能做到控制，不切换内容，我们有个tab项–“更多”，点击想单独弹更多浮层框，但是不想切换tab里面的内容

Answer 1

可以使用自定义导航栏来实现，参考下面demo

import promptAction from '@ohos.promptAction'

class TabBar {
  title: string
  index: number

  constructor(title: string, index: number) {
    this.title = title
    this.index = index
  }
}

@Entry
@Component
struct TabsTestPage {
  @State currentIndex: number = 0; // 当前tab值
  @State index: number = 0; // 判断tabs是否选中
  private tabsController: TabsController = new TabsController();
  private tabBars: TabBar[] = [
    new TabBar('首页', 0),
    new TabBar('推荐', 1),
    new TabBar('我的', 2),
    new TabBar('我的', 3),

  ]

  build() {
    Column() {
      Row() {
        Flex() {
          this.TabBuilder()
        }.width('90%')
      }.width('100%').height(100)
      .justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center)

      Stack({ alignContent: Alignment.TopEnd }) {
        Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.tabsController }) {
          TabContent() {
            Text('首页的内容').fontSize(30)
          }
          TabContent() {
            Text('推荐的内容').fontSize(30)
          }
          TabContent() {
            Text('发现的内容').fontSize(30)
          }
        }.barMode(BarMode.Scrollable)
        .barOverlap(false)
        .barHeight(0)

      }.width("100%")
    }
  }

  // 自定义tabs组件
  @Builder
  TabBuilder() {
    List() {
      ForEach(this.tabBars, (item: TabBar,index:number) => {
        ListItem() {
          Column() {
            Text(item.title)
              .fontColor(this.index === item.index ? '#000' : '#999')
              .fontSize(20)
              .align(Alignment.Center)
          }
          .justifyContent(FlexAlign.Center)
          .alignItems(HorizontalAlign.Start)
          .margin({ left: 10 })
          .onClick(() => {
            if (index===3) {
              //todo 其他逻辑
              promptAction.showToast({
                message:"这是更多"
              })
            } else {
              this.currentIndex = index;
            }
            this.index = index

          })
        }.height(100)
      })
    }.height(100)
    .listDirection(Axis.Horizontal)
    .scrollBar(BarState.Off)
  }
}