HarmonyOS 鸿蒙Next 父组件Tabs与子组件tabs如何联动

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

HarmonyOS 鸿蒙Next 父组件Tabs与子组件tabs如何联动

父组件Tabs与子组件tabs如何联动？如demo所示，subTab1右滑怎么滑动到tab1?subTab2左滑怎么滑动到tab2?
咨询场景描述：
@Entry
@Component
struct Index {
@State arr: number[] = []

@Styles
listCard() {
.backgroundColor(Color.White)
.height(72)
.width(“100%”)
.borderRadius(12)
}

build() {
Scroll() {
Column() {
Tabs({ barPosition: BarPosition.Start }) {
TabContent() {
Text(‘page1’)
}.tabBar(“Tab1”)

TabContent() {
this.HomeTab()
}.tabBar(“Tab2”)

TabContent() {
Text(‘page2’)
}.tabBar(“Tab3”)
}
.vertical(false)
.height(“100%”)

}.width(“100%”)
}
.edgeEffect(EdgeEffect.Spring)
.friction(0.6)
.backgroundColor(’#DCDCDC’)
.scrollBar(BarState.Off)
.width(‘100%’)
.height(‘100%’)
}

@Builder
HomeTab() {
Tabs({ barPosition: BarPosition.Start }) {
TabContent() {
List({ space: 10 }) {
ForEach(this.arr, (item: number) => {
ListItem() {
Text(“item” + item)
.fontSize(16)
}.listCard()
}, (item: string) => item)
}.width(“100%”)
.edgeEffect(EdgeEffect.Spring)
.nestedScroll({
scrollForward: NestedScrollMode.PARENT_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
}
.tabBar(“SubTab1”)

TabContent() {
}.tabBar(“SubTab2”)
}

.vertical(false)
.height(“100%”)
}

aboutToAppear() {
for (let i = 0; i < 30; i++) {
this.arr.push(i)
}
}
}

Harmonyos Next教程
3 回复

可以通过PanGesture结合TabsController的changeIndex方法实现一二级tab切换问题。给二级Tabs第一个页面和最后一个页面添加PanGesture事件，判断滑动方向，然后根据滑动方向，使用changeIndex来切换对应的一级Tabs页签。

[@Entry](/user/Entry) 
[@Component](/user/Component) 
struct TestTabWithTab { 
 [@State](/user/State) currentIndex: number = 1; 
 [@State](/user/State) subCurrentIndex: number = 0; 
 private fontColor: string = '#182431'; 
 private selectedFontColor: string = '#007DFF'; 
 private controller: TabsController = new TabsController(); 
 private subController: TabsController = new TabsController(); 
 private panOptionLeft: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left }); 
 private panOptionRight: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Right }); 

 [@Builder](/user/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](/user/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() { 
     // 一级Tab 
     Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) { 
       TabContent() { 
         Column() { 
           Text('首页内容') 
         } 
         .width('100%') 
         .height('100%') 
         .backgroundColor('#ffb554d7') 
         .justifyContent(FlexAlign.Center) 
         .alignItems(HorizontalAlign.Center) 
       }.tabBar(this.tabBuilder(0, '首页')) 

       TabContent() { 
         Column() { 
           // 二级Tab 
           Tabs({ barPosition: BarPosition.Start, controller: this.subController }) { 
             TabContent() { 
               Column().width('100%').height('100%').backgroundColor('#00CB87') 
             }.tabBar(this.subTabBuilder(0, 'green')) 
             .gesture( 
               PanGesture(this.panOptionRight) 
                 .onActionEnd(() => { 
                   this.controller.changeIndex(0) 
                 }) 
             ) 

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

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

             TabContent() { 
               Column().width('100%').height('100%').backgroundColor('#E67C92') 
             }.tabBar(this.subTabBuilder(3, 'pink')) 
             .gesture( 
               PanGesture(this.panOptionLeft) 
                 .onActionEnd(() => { 
                   this.controller.changeIndex(2) 
                 }) 
             ) 
           } 
           .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() { 
           Text('我的内容') 
         } 
         .width('100%') 
         .height('100%') 
         .backgroundColor('#ffc19757') 
         .justifyContent(FlexAlign.Center) 
         .alignItems(HorizontalAlign.Center) 
       }.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) 
     .backgroundColor('#F1F3F5') 
   }.width('100%') 
 } 
}

给 Tabs 传递  controller, 通过controller 的 changeIndex 随意设置跳转特定tabContent

主要代码:

  mainTabController = new TabsController()

this.mainTabController.changeIndex(this.currentTabIndex)<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

在HarmonyOS鸿蒙Next中，实现父组件Tabs与子组件Tabs的联动，关键在于确保它们之间的状态和数据能够同步更新。

Tabs组件在鸿蒙系统中是一个用于通过页签进行内容视图切换的容器组件。每个Tabs组件都包含TabContent和TabBar两部分，其中TabContent是内容页，TabBar是导航页签栏。

要实现父子Tabs的联动，可以考虑以下步骤：

  1. 状态管理：在父组件中定义一个状态变量，用于存储当前选中的Tab索引。这个状态变量可以通过@State装饰器来定义。
  2. 数据传递：将父组件的状态变量通过属性（prop）传递给子组件，确保子组件能够获取到当前选中的Tab索引。
  3. 事件监听：在子组件中监听Tab切换事件，当Tab切换时，更新父组件的状态变量。这可以通过在子组件中定义onChange事件处理函数来实现。
  4. 同步更新：确保父组件和子组件的Tabs组件在状态变量更新时能够同步更新视图。

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

回到顶部