说些废话

    官方文档：容器组件-Tabs（基于ArkTS的声明式开发范式）
    图片都是在华为官网的图标矢量库下载的。HarmonyOS主题图标库

概念

    Tabs：通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。
    TabContent：仅在Tabs中使用，对应一个切换页签的内容视图。

环境

    DevEco Studio 3.1 Canary1
    SDK 8
    我看的《API参考》更新时间为2022-12-16 17:46

代码

import prompt from '@ohos.prompt';
@Entry
@Component
struct Index {
  //感觉有回弹效果，不知道是不是错觉
  //#63bf02 绿色
  //索引从0开始
  private tabsController: TabsController = new TabsController();
  //选项卡的下标，从0开始，初始为0（表示被选中
  @State index: number = 0
  //自定义消息的tab组件
  @Builder tabMessage(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 0 ? $r('app.media.message_selected') : $r('app.media.message'))
          .size({width: 25, height: 25})
        Text('消息').fontSize(16)
          .fontColor(this.index == 0 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 0;
        this.tabsController.changeIndex(this.index);
      })
    }
  }
  //自定义通讯录的tab组件
  @Builder tabContactsGroup(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 1 ? $r('app.media.contacts_group_selected') : $r('app.media.contacts_group'))
          .size({width: 25, height: 25})
        Text('通讯录').fontSize(16)
          .fontColor(this.index == 1 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 1;
        this.tabsController.changeIndex(this.index);
      })
    }
  }
  //自定义发现的tab组件
  @Builder tabDiscover(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 2 ? $r('app.media.discover_selected') : $r('app.media.discover'))
          .size({width: 25, height: 25})
        Text('发现').fontSize(16)
          .fontColor(this.index == 2 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 2;
        this.tabsController.changeIndex(this.index);
      })
    }
  }
  //自定义发现的tab组件
  @Builder tabMy(){
    Row(){
      Column(){
        //上填充
        Blank()
        Image(this.index == 3 ? $r('app.media.my_selected') : $r('app.media.my'))
          .size({width: 25, height: 25})
        Text('我的').fontSize(16)
          .fontColor(this.index == 3 ? "#63bf02" : "#000000")
        //下填充
        Blank()
      }
      .height('100%')
      .width('100%')
      .onClick(() => {
        this.index = 3;
        this.tabsController.changeIndex(this.index);
      })
    }
  }

  build() {
    Row() {
      Column() {
        Tabs({
          index: 0,
          barPosition: BarPosition.End,
          controller: this.tabsController
        }) {
          //消息的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('message')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabMessage())
          //通讯录的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('contactsGroup')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabContactsGroup())
          //发现的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('discover')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabDiscover())
          //我的的tab绑定
          TabContent(){
            Row() {
              Column() {
                Text('my')
                  .textAlign(TextAlign.Center)
                  .fontSize(20)
                  .width('100%')
              }
              .width('100%')
            }
            .height('100%')
          }
          .tabBar(this.tabMy())
        }
        //如果不准滑动了前后没有回弹，但是切换的时候中间组件还是有回弹的感觉
        .scrollable(true)
        .width('100%')
        .height('100%')
        .barHeight(60)
        //The width of all TabBars is evenly allocated.
        .barMode(BarMode.Fixed)
        //如果用户点了组件，就产生回调
        .onChange((index: number) => {
          this.index = index;
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

展示