鸿蒙的底部菜单导航实现

开始入坑鸿蒙

效果图图下:

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

相关推荐
森之鸟2 小时前
开发中使用——鸿蒙子页面跳转到指定Tab页面
harmonyos·鸿蒙
程序员潘Sir4 小时前
HarmonyOS编写教师节贺卡
harmonyos·鸿蒙
程序员潘Sir1 天前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
HarmonyOS小助手1 天前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
HarmonyOS小助手2 天前
HEIF:更高质量、更小体积,开启 HarmonyOS 图像新体验
harmonyos·鸿蒙·鸿蒙生态
leon_teacher6 天前
ArkUI核心功能组件使用
android·java·开发语言·javascript·harmonyos·鸿蒙
开发小能手嗨啊7 天前
鸿蒙开发进阶(HarmonyOS)
harmonyos·鸿蒙·鸿蒙开发·开发教程·纯血鸿蒙·南向开发·北向开发
HarmonyOS小助手7 天前
CodeGenie 的 AI 辅助调优让你问题定位效率大幅提升
harmonyos·鸿蒙·鸿蒙生态
HarmonyOS小助手7 天前
《音频焦点管理》最佳实践:让鸿蒙应用中的每一段声音,都不被打扰
harmonyos·鸿蒙·鸿蒙生态