鸿蒙的底部菜单导航实现

开始入坑鸿蒙

效果图图下:

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 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳16 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
NoirSeeker16 小时前
在windows平台上基于OpenHarmony sdk编译三方库并暴露给ArkTS使用(详细)
c++·windows·arkts·鸿蒙·交叉编译
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
冰天糖葫芦3 天前
鸿蒙Next原生应用开发AES加解密
鸿蒙·aes加解密
SuperHeroWu74 天前
【HarmonyOS】元服务入门详解 (一)
华为·harmonyos·鸿蒙·元服务·卡片·免安装
SuperHeroWu74 天前
【HarmonyOS】元服务概念详解
华为·harmonyos·鸿蒙·概念·元服务·详解
weixin_541299944 天前
鸿蒙应用开发: 鸿蒙项目中使用私有 npm 插件的完整流程
华为·npm·harmonyos·鸿蒙
HarmonyOS小助手9 天前
从航旅纵横到东南亚Grab:鸿蒙生态的“星辰大海”,由开发者共绘
harmonyos·鸿蒙·鸿蒙生态
逻极9 天前
HarmonyOS从入门到精通:自定义组件开发指南(二):组件属性与参数传递
华为·harmonyos·arkts·鸿蒙·自定义组件