鸿蒙HarmonyOS之使用ArkTs语言实现自定义Tab菜单栏分页主页面UI

本文主要是介绍鸿蒙HarmonyOS之使用ArkTs语言实现自定义Tab菜单栏分页主页面UI，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、效果

显示为3个Tab菜单栏，中间可以滑动
请添加图片描述

二、实现步骤

1、Index.ets

示例代码中用到的颜色、文字、图片等资源可以自行替换

import { Tab_1 } from './Tab_1';
import { Tab_2 } from './Tab_2';
import { Tab_3 } from './Tab_3';//主页面
@Entry
@Component
struct Index {@State tabsIndex: number = 0;build() {//barPosition为End，vertical为false是底部导航Tabs({ barPosition: BarPosition.End }) {//tab1TabContent(){Tab_1()}.tabBar(this.TabBarBuilder(0,$r("app.media.ic_select_live"),$r("app.media.ic_unselect_live"),$r('app.string.tab_live')))//tab2TabContent(){Tab_2()}.tabBar(this.TabBarBuilder(1,$r("app.media.ic_select_cloud_upload"),$r("app.media.ic_unselect_cloud_upload"),$r('app.string.tab_cloud_upload')))//tab3TabContent(){Tab_3()}.tabBar(this.TabBarBuilder(2,$r("app.media.ic_select_setting"),$r("app.media.ic_unselect_setting"),$r('app.string.tab_setting')))}//barMode是控制导航菜单栏是否可以滚动，默认值为Fixed：固定导航栏.barMode(BarMode.Fixed).barHeight(56).barWidth('100%').vertical(false).backgroundColor($r('app.color.background_shallow_grey')).onChange((index: number) => {//记录当前选中Tab页签位置this.tabsIndex = index;})}/*** 自定义导航栏tab组件样式* @param index 页签对应位置* @param selectedImage 选中状态图片资源* @param unselectedImage 未选中状态图片资源* @param tabBarName tab栏名称*/@BuilderTabBarBuilder(index: number, selectedImage: Resource, unselectedImage: Resource, tabBarName: Resource) {Column() {Image(this.tabsIndex === index ? selectedImage : unselectedImage).width(24).height(24).margin({ bottom: 4 })Text(tabBarName).fontSize(10).fontFamily('HarmonyHeiTi-Medium').fontColor(this.tabsIndex === index ? $r('app.color.tab_bar_select') : $r('app.color.tab_bar_unselect'))}.width('100%').padding({ top: 6, bottom: 6 }).alignItems(HorizontalAlign.Center).id(`tabBar${index}`)}
}

2、分别创建Tab_1、Tab_2、Tab_3的ArkTs页

示例：每个Tab页面内容可以在各自的ArkTs文件里面编写

@Preview
@Component
export struct Tab_1 {build(){Row(){Text($r('app.string.tab_setting')).fontSize(20).fontFamily('HarmonyHeiTi-Medium').fontColor($r('app.color.tab_bar_select'))}.width('100%').height('100%')}
}