应用底部导航实现,有人知道处理方案吗?

应用底部导航实现

HarmonyOS
2024-05-26 14:32:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
e_leaner

核心代码

@Entry 
@Component 
struct Index { 
 @State message: string = 'Hello World'; 
 @State selectTabIndex: number = 3; 
 @State test: string[] = ["1", "2", "4", "4", "5", "6", "7", "8", "9", "9", "9",] 
 @State tabs: string[] = ["直播日历", "城市专享优惠", "发布会", "非常会玩机", "精选推荐", "特色门店百家游"] 
 listScroller: Scroller = new Scroller() 
 tabsController: TabsController = new TabsController() 
​ 
 build() { 
   Column() { 
     Tabs({ index: this.selectTabIndex, barPosition: BarPosition.Start, controller: this.tabsController }) { 
       ForEach(this.tabs, (item: string, index) => { 
         TabContent() { 
           Text(item) 
        } 
        .height(0) 
        .layoutWeight(1) 
        .tabBar(this.buildTab(item, index)) 
      }, (item: string, index: number) => item + index) 
    } 
    .height(0) 
    .barHeight(200) 
    .layoutWeight(1) 
    .fadingEdge(false) 
    .barMode(BarMode.Scrollable) 
    .onChange(index => { 
       this.selectTabIndex = index; 
    }) 
  } 
  .height('100%') 
  .width('100%') 
  .backgroundColor(0xf0fff0) 
} 
​ 
 @Builder 
 buildTab(title: ResourceStr, targetIndex: number) { 
   Column() { 
     Text(title) 
      .fontColor(this.selectTabIndex === targetIndex ? $r('sys.color.ohos_id_color_subtab_text_on') : $r('sys.color.ohos_id_color_subtab_text_off')) 
      .padding({ top: 10, bottom: 10 }) 
      .fontFamily($r('sys.string.ohos_id_text_font_family_medium')) 
      .fontSize($r('sys.float.ohos_id_text_size_body1')) 
  } 
  .margin({ 
     left: 10, 
     right: 10 
  }) 
​ 
  .justifyContent(FlexAlign.Center) 
  .borderWidth({ bottom: 10, left: 0, right: 0, top: 0 }) 
  .borderColor(this.selectTabIndex === targetIndex ? $r('sys.color.ohos_id_color_subtab_text_on') : Color.Transparent) 
  .onClick((e => { 
     this.tabsController.changeIndex(targetIndex); 
  })) 
} 
}

实现效果

注明适配的版本信息

  • IDE:DevEco Studio 4.0.3.600
  • SDK:HarmoneyOS 4.0.10.11
分享
微博
QQ
微信
回复
2024-05-27 19:44:28
相关问题
导航栏如何适配,有人知道?
674浏览 • 0回复 待解决
SnapShot定位,有人知道怎么处理
417浏览 • 1回复 待解决
如何实现振动,有人知道
713浏览 • 2回复 待解决
如何实现翻页功能,有人知道
672浏览 • 1回复 待解决
有人知道如何实现图文混排
377浏览 • 1回复 待解决
应用商店更新机制有人知道
737浏览 • 1回复 待解决
热重载该如何实现有人知道
360浏览 • 1回复 待解决
如何实现http长连接,有人知道
634浏览 • 1回复 待解决
弧形进度条实现有人知道方法
350浏览 • 1回复 待解决
如何实现防截屏功能,有人知道
860浏览 • 1回复 待解决
有人知道关于页demo
419浏览 • 1回复 待解决
如何发送短信,有人知道?
673浏览 • 1回复 待解决
如何保存faultLogger ,有人知道
178浏览 • 1回复 待解决
有人知道JS menu如何隐藏
3221浏览 • 1回复 待解决
webview组件demo ,有人知道
446浏览 • 1回复 待解决
有人知道
60浏览 • 1回复 待解决
有人知道社区怎么预约直播
1389浏览 • 1回复 已解决
taskpool 使用问题,有人知道
432浏览 • 1回复 待解决