HarmonyOS 鸿蒙Next Tabs组件点击切换Tab，没有进入onTabBarClick监听

发布于 1周前 作者 h691938207 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Tabs组件点击切换Tab，没有进入onTabBarClick监听

Tabs组件点击切换Tab，没有进入onTabBarClick监听

代码如下：

Tabs({
  index: this.selTabIndex,
  barPosition: BarPosition.End,
  controller: this.controller
}) {
  TabContent() {
    Text('1')
  }

  TabContent() {
    Text('2')
  }

  TabContent() {
    Text('3')
  }

  TabContent() {
    Text('4')
  }

  TabContent() {
    Text('5')
  }
}
.vertical(false)
.scrollable(false)
.layoutWeight(1)
.barMode(BarMode.Fixed)
.barWidth('100%')
.barHeight(0)
.animationDuration(0)
.onTabBarClick((index: number) => {

})

更多关于HarmonyOS 鸿蒙Next Tabs组件点击切换Tab，没有进入onTabBarClick监听的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

你的demo这边跑起来不能滑动，但是看这个属性是点击页签也才会监听到的，滑动下方的tabs是无法触发的

参考demo： 下方的demo 只有滑动green\blue等才会触发 滑动颜色板块是无法触发监听的

// xxx.ets

@Entry
@Component
struct Page2 {

  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  @State selectedIndex: number = 0

  private controller: TabsController = new TabsController()

  @Builder tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.selectedIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.selectedIndex === index ? 500 : 400)
        .lineHeight(22)
        .margin({ top: 17, bottom: 7 })
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.selectedIndex === index ? 1 : 0)
    }
    .width('100%')
  }

  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.Start,
        index: this.currentIndex,
        controller: this.controller
      }) {
        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#00CB87')
        }
        .tabBar(this.tabBuilder(0, 'green'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#007DFF')
        }
        .tabBar(this.tabBuilder(1, 'blue'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#FFBF00')
        }
        .tabBar(this.tabBuilder(2, 'yellow'))

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }
        .tabBar(this.tabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onTabBarClick((index: number) => {
        console.log("===" + index)
      })
      .onChange((index: number) => {
        // currentIndex控制TabContent显示页签
        this.currentIndex = index
        this.selectedIndex = index
      })
      .onAnimationStart((index: number, targetIndex: number, event: TabsAnimationEvent) => {
        if (index === targetIndex) {
          return
        }
        // selectedIndex控制自定义TabBar内Image和Text颜色切换
        this.selectedIndex = targetIndex
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }
    .width('100%')
  }
}

或者你也可以参考下该属性的一些demo，参考连接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-container-tabs-V13#ontabbarclick10

更多关于HarmonyOS 鸿蒙Next Tabs组件点击切换Tab，没有进入onTabBarClick监听的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS鸿蒙系统中Next Tabs组件点击切换Tab时未进入onTabBarClick监听的问题，这通常可能是由于事件监听未正确设置或组件状态未正确更新所导致。

首先，请确认你已经正确地为Tabs组件设置了onTabBarClick监听器。在鸿蒙系统的XML布局文件中，确保Tabs组件的onTabBarClick属性指向了一个有效的方法。如果是在JavaScript或TypeScript中编写逻辑，确保事件监听器已正确绑定到组件上。

其次，检查onTabBarClick方法的实现，确保方法内部逻辑没有错误，比如未定义的变量、错误的条件判断等，这些都可能导致方法不执行或执行不正确。

此外，还需确认Tabs组件的当前状态是否允许触发点击事件。例如，如果Tabs组件被设置为禁用状态，或者由于某些条件限制导致无法响应点击事件，那么onTabBarClick也不会被触发。

如果以上检查均无误，但问题依旧存在，可能是由于鸿蒙系统内部的bug或特定版本的问题。此时，建议查阅鸿蒙系统的官方文档或社区论坛，看是否有其他开发者遇到并解决了类似的问题。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html，

回到顶部