HarmonyOS Next开发中如何捕获用户点击Tabs的事件？

Question

HarmonyOS Next开发中如何捕获用户点击Tabs的事件？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

暂时没有直接捕获 Tabs 点击事件的方法，但可以使用 TabsController 自定义页签并在其中添加事件进行逻辑判断，参考如下：

export class ButtonInfoModel {
  index: number = 0;
  info: string = 'home';
  title: string = 'Home';
}

const buttonInfo: ButtonInfoModel[] = [
  {
    index: 0,
    info: 'home',
    title: 'Home'
  },
  {
    index: 1,
    info: 'map',
    title: 'Map'
  },
  {
    index: 2,
    info: 'charging',
    title: 'Charging'
  }
]

@Component
export struct Home {
  @State message: string = 'Home';

  build() {
    Row() {
      Column() {
        Text(this.message)
         .fontSize(50)
         .fontWeight(FontWeight.Bold)
        Text('点击之后无法进入 charging 页，会跳转 map 页')
         .fontSize(20)
         .fontWeight(FontWeight.Bold)
         .onClick(() => {
            buttonInfo[2].info = "map"
          })
      }
     .width('100%')
    }
   .height('100%')
  }
}

还可以使用onTabBarClick(event: (index: number) => void)获取父组件当前点击的 tabIndex，在父组件中通过@State定义一个currentTabIndex变量，在onTabBarClick回调中将index赋值给currentTabIndex，并将这个值传递给TabContent包裹的子组件。在子组件中通过@Props和@Watch来监听父组件传递值的不同，执行各个tabContent中的相关方法。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。