Navigation实现Tabs切换效果

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

HarmonyOS
2024-05-26 14:38:00
浏览
收藏 0
回答 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) 
} 
}

实现效果

注明适配的版本信息

  •  IDE:DevEco Studio 4.0.3.600
  •  SDK:HarmoneyOS 4.0.10.11
分享
微博
QQ
微信
回复
2024-05-27 19:50:56
相关问题
tabs结合scroll实现吸顶效果
454浏览 • 1回复 待解决
如何实现Tabs组件tarbar的吸顶效果
240浏览 • 1回复 待解决
如何选择Navigation 组件与 Tabs 组件
877浏览 • 1回复 待解决
Tabs选项绑定onClick事件之后无法切换
821浏览 • 0回复 待解决
如何禁止Tabs的系统切换逻辑
750浏览 • 0回复 待解决
navigation 导航栏支持毛玻璃效果吗?
416浏览 • 1回复 待解决
请问一下tab按钮组切换效果
436浏览 • 1回复 待解决
基于tabs实现页面布局
222浏览 • 1回复 待解决
canvas如何实现水印效果
420浏览 • 1回复 待解决
如何实现星级评分效果
80浏览 • 1回复 待解决
PageAbility配合多个Slice实现页面间切换
12531浏览 • 4回复 已解决
panGesture结合动画实现fling效果
417浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
548浏览 • 1回复 待解决
如何等效实现JSONObejct效果
273浏览 • 1回复 待解决
图片模糊效果如何实现
363浏览 • 1回复 待解决