Navigation实现Tabs切换效果

对于不想使用Tabs组件实现一级导航的界面，可以尝试使用Navigation组件。

HarmonyOS

makeer

2024-05-26 14:38:00

浏览

回答 1

待解决

回答 1

按赞同

按时间

youganlan

核心代码解释

@Entry 
@Component 
struct Index { 
 @State cIndex: number = 0 
 @State cIndex2: number = 0 
 private controller: TabsController = new TabsController() 
 
 @Builder 
 TabBuilder(name: string) { 
   Column() { 
     Text(name) 
      .fontSize(10) 
      .fontWeight(500) 
      .lineHeight(14) 
  } 
  .width('100%') 
  .height('100%') 
  .justifyContent(FlexAlign.Center) 
} 
 
 build() { 
   Column() { 
     Tabs({ barPosition: BarPosition.End, controller: this.controller }) { 
       TabContent() { 
         Text('首页') 
      } 
      .tabBar(this.TabBuilder('首页')) 
 
       TabContent() { 
         Text('发现') 
      } 
      .tabBar(this.TabBuilder('发现')) 
 
       TabContent() { 
         Text('推荐') 
      } 
      .tabBar(this.TabBuilder('推荐')) 
 
       TabContent() { 
         Navigation() { 
           Row() { 
             Button('1') 
              .onClick(() => { 
                 this.cIndex2 = 0 
              }) 
             Button('2') 
              .onClick(() => { 
                 this.cIndex2 = 1 
              }) 
             Button('3') 
              .onClick(() => { 
                 this.cIndex2 = 2 
              }) 
             Button('else') 
              .onClick(() => { 
                 this.cIndex2 = 3 
              }) 
          } 
 
           if (this.cIndex2 === 0) { 
             TabContent() { 
               Text('111') 
            } 
          } 
           else if (this.cIndex2 === 1) { 
             TabContent() { 
               Text('222') 
            } 
          } 
           else if (this.cIndex2 === 2) { 
             TabContent() { 
               Text('333') 
            } 
          } 
           else { 
             TabContent() { 
               Text('else') 
            } 
          } 
        } 
        .hideTitleBar(true) 
        .hideToolBar(false) 
      } 
      .tabBar(this.TabBuilder('Navigation')) 
    } 
 
     Row() { 
       Button('0') 
        .backgroundColor(Color.Red) 
        .onClick(() => { 
           this.cIndex2 = 0 
        }) 
       Button('1') 
        .backgroundColor(Color.Green) 
        .onClick(() => { 
           this.cIndex2 = 1 
        }) 
       Button('2') 
        .backgroundColor(Color.Blue) 
        .onClick(() => { 
           this.cIndex2 = 2 
        }) 
    } 
  } 
  .height('100%') 
  .width('100%') 
  .backgroundColor(0xf0fff0) 
} 
}

实现效果