【HarmonyOS NEXT】Tabs组件嵌套时出现一二级Tabs切换问题_harmony tab 嵌套

【关键字】

Tabs组件嵌套 / Tabs切换 / 滑动 / PanGesture / controller.changeIndex

【问题描述】

1. 一级Tabs组件下嵌套一个二级Tabs，二级Tabs第一个页面左滑或最后一个页面右滑时无法切换至一级Tabs标签。是否可以通过系统API或者自定义事件拦截处理？

2. 如何实现内层滑动需要触发外层页面切换时，滑动过程中页面跟随滑动移动？效果如图所示。

【解决方案】

1. 可通过PanGesture和controller.changeIndex实现一二级Tabs切换，示例代码如下：

   @Entry
   @Component
   struct TabsExample {
   @State fontColor: string = '#182431'
   @State selectedFontColor: string = '#007DFF'
   @State currentIndex: number = 0
   private controller: TabsController = new TabsController()
    
   @State subCurrentIndex: number = 0
   private subController: TabsController = new TabsController()
    
   private panOptionRight: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left })
   private panOptionLeft: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Right })
    
    
   @Builder tabBuilder(index: number, name: string) {
   Column() {
   Text(name)
   .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
   .fontSize(16)
   .fontWeight(this.currentIndex === index ? 500 : 400)
   .lineHeight(22)
   .margin({ top: 17, bottom: 7 })
   Divider()
   .strokeWidth(2)
   .color('#007DFF')
   .opacity(this.currentIndex === index ? 1 : 0)
   }.width('100%')
   }
    
   @Builder subTabBuilder(index: number, name: string) {
   Column() {
   Text(name)
   .fontColor(this.subCurrentIndex === index ? this.selectedFontColor : this.fontColor)
   .fontSize(16)
   .fontWeight(this.subCurrentIndex === index ? 500 : 400)
   .lineHeight(22)
   .margin({ top: 17, bottom: 7 })
   Divider()
   .strokeWidth(2)
   .color('#007DFF')
   .opacity(this.subCurrentIndex === index ? 1 : 0)
   }.width('100%')
   }
    
   build() {
   Column() {
   Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
   TabContent() {
   Column().width('100%').height('100%').backgroundColor('#ffb554d7')
   }.tabBar(this.tabBuilder(0, '首页'))
    
   TabContent() {
   Column(){
   Tabs({ barPosition: BarPosition.Start,controller: this.subController }) {
   TabContent() {
   Column().width('100%').height('100%').backgroundColor('#00CB87')
   // 左右拖动触发该手势事件
   .gesture(
   PanGesture(this.panOptionRight)
   .onActionStart((event?: GestureEvent) => {
   console.info('Pan start')
   })
   .onActionUpdate((event?: GestureEvent) => {
   if (event) {
   }
   })
   .onActionEnd(() => {
   this.controller.changeIndex(2)
   console.info('Pan end')
   })
   )
   }.tabBar(this.subTabBuilder(3, 'pink'))
   }
   .vertical(false)
   .barMode(BarMode.Fixed)
   .barWidth(360)
   .barHeight(56)
   .animationDuration(400)
   .onChange((index: number) => {
   this.subCurrentIndex = index
   })
   .width(360)
   .backgroundColor('#F1F3F5')
   }
   .width('100%').height('100%').backgroundColor('#00CB87')
   }.tabBar(this.tabBuilder(1, '详情'))
    
   TabContent() {
   Column().width('100%').height('100%').backgroundColor('#ffc19757')
   }.tabBar(this.tabBuilder(2, '我的'))
    
   }
   .vertical(false)
   .barMode(BarMode.Fixed)
   .barWidth(360)
   .barHeight(56)
   .animationDuration(400)
   .onChange((index: number) => {
   this.currentIndex = index
   })
   .width(360)
   .height(296)
   .margin({ top: 52 })
   .backgroundColor('#F1F3F5')
   }.width('100%')
   }
   }
   

2. 可尝试调整animationDuration的值来调节想要的切换效果。

   参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-tabs-0000001821000917#ZH-CN_TOPIC_0000001821000917__%E5%B1%9E%E6%80%A7