创建tab页面，效果如图

代码如下：

@Entry
@Component
struct Index {
  private controller: TabsController = new TabsController()

  build() {

    Row() {
      Tabs({ barPosition: BarPosition.End, controller: this.controller }) {
        TabContent() {
          Column(){
            Text($r('app.string.messages'))
          }.width('100%').height('100%').backgroundColor(Color.White)
        }.tabBar($r('app.string.messages'))

        TabContent() {
          Column(){
            Text($r('app.string.contact'))
          }.width('100%').height('100%').backgroundColor(Color.White)
        }.tabBar($r('app.string.contact'))

        TabContent() {
          Column(){
            Text($r('app.string.discover'))
          }.width('100%').height('100%').backgroundColor(Color.White)
        }.tabBar($r('app.string.discover'))

        TabContent() {
          Column(){
            Text($r('app.string.me'))
          }.width('100%').height('100%').backgroundColor(Color.White)
        }.tabBar($r('app.string.me'))
      }
       .barWidth('100%')
      .barHeight(60)
      .animationDuration(400)
      .onChange((index: number) => {
        console.info(index.toString())
      })
      .width('100%')
      .height('100%')
      .backgroundColor(0xF5F5F5)
    }.width('100%')
    .height('100%')
  }
}

 代码已上传gitee后续不断更新

代码地址：WeChat: 开源鸿蒙 openharmony 仿微信UI ArkUI (gitee.com)