鸿蒙的底部菜单导航实现

开始入坑鸿蒙

效果图图下:

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

相关推荐
程序员潘Sir11 小时前
鸿蒙应用开发从入门到实战(十九):样式复用案例
harmonyos·鸿蒙
程序员潘Sir2 天前
鸿蒙应用开发从入门到实战(十八):组件编程思想之代码复用
harmonyos·鸿蒙
Y学院2 天前
实战项目:鸿蒙多端协同智能家居控制 App 开发全流程
开发语言·鸿蒙
程序员潘Sir3 天前
鸿蒙应用开发从入门到实战(十七):ArkUI组件List&列表布局
harmonyos·鸿蒙
小白学鸿蒙4 天前
OpenHarmony(开源鸿蒙)小白入门教程
harmonyos·鸿蒙·鸿蒙系统
懒惰蜗牛7 天前
鸿蒙开发3--UI布局(玩转鸿蒙的Row、Column与Stack容器)
ui·华为·harmonyos·鸿蒙·鸿蒙系统
_waylau7 天前
如何将鸿蒙5应用升级到鸿蒙6
华为·harmonyos·鸿蒙·鸿蒙系统
ChinaDragonDreamer12 天前
HarmonyOS:固定样式弹出框
harmonyos·鸿蒙
鸿蒙小白龙13 天前
【OpenHarmony实战】系统参数SystemParameter完全指南:param get/set调试技巧与案例精解
harmonyos·鸿蒙·open harmony
鸿蒙小白龙13 天前
OpenHarmony中的系统服务管理配置讲解
harmonyos·鸿蒙·鸿蒙系统·open harmony