HarmonyOS(ArkTs)自定义底部TabBar

复制代码
@Entry
@Component
struct TabNavCustomePage {
  @State currentIndex:number = 0
  private tabsController: TabsController = new TabsController()
  //自定义组件
  @Builder
  TabBuilder(title:string,targetIndex:number,normalImg:Resource,selectedImg:Resource){
    Column(){
      Image(this.currentIndex == targetIndex?selectedImg:normalImg )
        .width(28)
        .height(28)
      Text(title)
        .padding({top:2})
        .fontSize(20)
        .fontColor(this.currentIndex == targetIndex?'#d81e06':'#8a8a8a')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(()=>{
      this.currentIndex = targetIndex
      this.tabsController.changeIndex(this.currentIndex)
    })

  }
  build() {
    Column() {
      Tabs({
        // barPosition:BarPosition.Start  //默认
        barPosition: BarPosition.End, //底部导航
        controller:this.tabsController
      }) {
        TabContent() {
          Column() {
            Text("首页").fontSize(30)
            List() {
              ListItem() {
                Text("首页1").fontSize(30)
              }

              ListItem() {
                Text("首页1").fontSize(30)
              }

              ListItem() {
                Text("首页1").fontSize(30)
              }

              ListItem() {
                Text("首页1").fontSize(30)
              }

              ListItem() {
                Text("首页1").fontSize(30)
              }
            }
          }
          .height('100%')

        }.tabBar(this.TabBuilder("首页",0,$r('app.media.home'),$r('app.media.home_selected')))

        TabContent() {
          Text("分类").fontSize(30)
        }.tabBar(this.TabBuilder("分类",1,$r('app.media.cate'),$r('app.media.cate_selected')))

        TabContent() {
          Text("购物车").fontSize(30)
        }.tabBar(this.TabBuilder("购物车",2,$r('app.media.cart'),$r('app.media.cart_selected')))

        TabContent() {
          Text("用户").fontSize(30)
        }.tabBar(this.TabBuilder("用户",3,$r('app.media.user'),$r('app.media.user_selected')))
      }
      .scrollable(false) //禁止滑动切换
      .animationDuration(0) //去掉切换页面的动画
    }
    .width('100%')
    .height('100%')
  }
}
复制代码

 

posted @   玉米炖排骨  阅读(626)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示