Tabs组件的页面组成包含两个部分，分别是TabContent和TabBar。TabContent是内容页，TabBar是导航页签栏，页面结构如下图所示，根据不同的导航类型，布局会有区别，可以分为底部导航、顶部导航、侧边导航，其导航栏分别位于底部、顶部和侧边。

说明

• TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。

• TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

话不多说写代码看注解查效果！！！

//日志模块
import hilog from '@ohos.hilog';

@Entry
@Component
struct Index {
  @State currentIndex: number = 0;

  @Builder
  tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25, height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    //导航栏位置使用Tabs的barPosition参数进行设置
    Tabs({ barPosition: BarPosition.End }) {
      TabContent() {
        Text('首页的内容').fontSize(30)
      }
      //设置页签
      // .tabBar('首页')
      .tabBar(this.tabBuilder(('首页'), 0, $r('app.media.icon'), $r('app.media.icon')))

      TabContent() {
        Text('推荐的内容').fontSize(30)
      }
      // .tabBar('推荐')
      .tabBar(this.tabBuilder(('推荐'), 1, $r('app.media.icon'), $r('app.media.icon')))

      TabContent() {
        Text('发现的内容').fontSize(30)
      }
      // .tabBar('发现')
      .tabBar(this.tabBuilder(('发现'), 2, $r('app.media.icon'), $r('app.media.icon')))

      TabContent() {
        Text('我的内容').fontSize(30)
      }
      // .tabBar("我的")
      .tabBar(this.tabBuilder(('我的'), 3, $r('app.media.icon'), $r('app.media.icon')))
    }
    //控制滑动切换
    .scrollable(true)
    //控制导航栏是否可以滚动
    .barMode(BarMode.Fixed)
    //监听索引index的变化
    .onChange((index: number) => {
      this.currentIndex = index
    })
  }
}