了解更多开源内容请访问：开源基础软件社区https://ost.51cto.com概述效果图如下：选中时，字体样式和图片将相应更改。Text创建一个空工程SDK选择7以上，language选择ets。初始化导航栏，在media文件夹中存放需要的图片，初始将导航栏中选中的tab的索引设置为0，定义一个静态数组存放导航菜单的数据——标题名称，选中和未选中状态图片。案例演示代码如下：@StateselectedIndex:number=0@StatemenuData:any[]=[{"text":"Homepage","inActiveImg":$r('app.media.shouye'),"activeImg":$r('app.media.taobao')},{"text":"购物","inActiveImg":$r('app.media.guangguang'),"activeImg":$r('app.media.guangguang_on'),},{"text":"Message","inActiveImg":$r('app.media.msg'),"activeImg":$r('app.media.msg_on'),},{"text":"购物车","inActiveImg":$r('app.media.gouwuche'),"activeImg":$r('app.media.gouwuche_on'),},{"text":"我的淘宝","inActiveImg":$r('app.media.wode'),"activeImg":$r('app.media.wode_on'),},]布局样式A单个标签由图片和文字组成，为垂直布局；整体导航栏为横向布局；使用ForEach循环遍历导航菜单栏中的数据，通过判断是否被选中来确定显示的图文样式（可根据喜好添加边框），示例代码如下：build(){flex（{方向：FlexDirection.Row，alignItems：ItemAlign.Center，justifyContent：FlexAlign.SpaceAround}）{ForEach（this.menuData.map（（item1，index1）=>{return{i：index1，data：item1};}),item=>{//参数2:itemgeneratorColumn({space:5}){Image(this.selectedIndex===item.i?item.data.activeImg:item.data.inActiveImg).width(30.height(30).objectFit(ImageFit.Cover)Text(item.data.text).fontSize(15).fontWeight(FontWeight.Bold).fontColor(this.selectedIndex===item.i?'#FC7D0C':'#bfbfbf')}.height('60').onClick(()=>{this.selectedIndex=item.i;})},item=>item.i.toString())}.borderColor(Color.Gray).borderWidth(0.2).width('100%').height('9%')}这一步可以预览效果如下：封装和使用1.可以新建一个etsPage，设置MyTab组件导出，然后在新页面导入。将：@StateselectedIndex:number=0改为：@LinkselectedIndex:number这个是针对双向数据绑定的：CaseDemo新建页面Test.ets，代码如下：import{MyTab}from'./MyTab'@Entry@ComponentstructTest{@StateselectedIndex:number=0build(){Flex({direction:FlexDirection.Column}){Flex({direction:FlexDirection.Column}){if(this.selectedIndex==0){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('这是首页的界面').fontSize(30)}.height('92%').width('98%')}elseif(this.selectedIndex==1){Flex({ddirection:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('这是购物界面').fontSize(30)}.height('92%').width('98%')}elseif(this.selectedIndex==2){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('这是消息界面').fontSize(30)}.height('92%').width('98%')}elseif(this.selectedIndex==3){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.center}){Text('这是购物车的界面').fontSize(30)}.height('92%').width('98%')}elseif(this.selectedIndex==4){Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center,justifyContent:FlexAlign.Center}){Text('这是我的界面').fontSize(30)}.height('92%').width('98%')}}.width('98%').height('91%')MyTab({selectedIndex:$selectedIndex})}.width('100%').height('100%')}}2.也可以作为同一页面的子组件。如果作为子组件，可以直接将MyTab移动到同一个ets文件中，不需要添加export和import模块，但是还需要将选择的索引类型改为双向数据绑定@Link结语以上就是我这次的小分享啦！文章相关附件可点击下方原文链接下载：https://ost.51cto.com/resource/2179。了解更多开源知识，请访问：开源基础软件社区https://ost.51cto.com。
