鸿蒙的底部菜单导航实现

开始入坑鸿蒙

效果图图下:

Index代码如下:

javascript 复制代码
import Home from "../pages/home/Home" //首页
import Classify from "./classify/Classify" //分类
import Mine from "../pages/mine/Mine" //我的
@Entry
@Component
struct Index {
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageShow() {
    console.info('Index onPageShow');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onPageHide() {
    console.info('Index onPageHide');
  }
  // 只有被@Entry装饰的组件才可以调用页面的生命周期
  onBackPress() {
    console.info('Index onBackPress');
  }
  build() {
    Column() {
      Tabs({
        barPosition: BarPosition.End,
        controller: this.controller
      }) {
        TabContent() {
          Home()
        }.tabBar(this.TabBuilder('首页', 0, $r('app.media.home_yes'), $r('app.media.home_no')))
        TabContent() {
          Classify()
        }.tabBar(this.TabBuilder('分类', 1, $r('app.media.classify_yes'), $r('app.media.classify_no')))

        TabContent() {
          Mine()
        }.tabBar(this.TabBuilder('我的', 2, $r('app.media.mine_yes'), $r('app.media.mine_no')))
      }.scrollable(false) // 禁止滑动切换
    }
    .width('100%')
    .height('100%')
  }
  // 自定义导航页签的样式
  @Builder TabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Divider()
        .color('#e0e0e0') // 分割线颜色
        .height(1) // 分割线高度
        .margin({ top: 5 }) // 分割线上方的间距
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .margin({ top: 5 })
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1296db' : '#8a8a8a')
        .fontWeight(this.currentIndex === targetIndex ? FontWeight.Bold : FontWeight.Normal)

    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex
      this.controller.changeIndex(this.currentIndex)
    })
  }

}

单个页面(其他都一样)

javascript 复制代码
@Component
export default struct Home {
  pageStack: NavPathStack = new NavPathStack()
  build() {
    Column() {
      Text("首页").width('100%').height('100%').textAlign(TextAlign.Center).fontSize("25fp")
    }.size({ width: '100%', height: '100%' })
  }
}

项目目录截图

我这里也给出工程代码:https://download.csdn.net/download/qq_41733851/89930328?spm=1001.2014.3001.5501

相关推荐
程序员潘Sir10 小时前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙
鸿蒙小白龙1 天前
鸿蒙应用之网络请求方案总结
harmonyos·鸿蒙·鸿蒙系统·open harmony
赵健zj1 天前
鸿蒙实现右滑加载更多
鸿蒙
程序员潘Sir1 天前
鸿蒙应用开发从入门到实战(五):ArkUI概述
harmonyos·鸿蒙
程序员潘Sir2 天前
鸿蒙应用开发从入门到实战(四):ArkTS 语言概述
harmonyos·鸿蒙
vipers_3 天前
鸿蒙的编程软件的介绍
鸿蒙·鸿蒙编程软件
被开发耽误的大厨4 天前
鸿蒙项目篇-22-项目功能结构说明-写子页面和导航页面
android·华为·harmonyos·鸿蒙
程序员潘Sir4 天前
鸿蒙应用开发从入门到实战(三):第一个鸿蒙应用
harmonyos·鸿蒙
森之鸟6 天前
开发中使用——鸿蒙子页面跳转到指定Tab页面
harmonyos·鸿蒙
程序员潘Sir6 天前
HarmonyOS编写教师节贺卡
harmonyos·鸿蒙