tabBar案例

目录结构

Index.ets页面，引入user组件和home页面

import {User} from './components/user'
import {Home} from './components/home'
@Entry
@Component
struct Index {
  build(){
    Column(){
      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          User()
        }
        .tabBar('首页')

        TabContent() {
          Home()
        }
        .tabBar('推荐')

        TabContent() {
          Text('发现的内容').fontSize(30)
        }
        .tabBar('发现')

        TabContent() {
          Text('我的内容').fontSize(30)
        }
        .tabBar("我的")
      }
    }
    .height('100%')
    .width('100%')
  }
}

pages/components/home.ets页面

@Component
export struct Home {
  @State message: string = 'Hello World'

  build() {
    Tabs() {
      TabContent() {
        Text('首页的内容').fontSize(30)
      }
      .tabBar('首页')

      TabContent() {
        Text('推荐的内容').fontSize(30)
      }
      .tabBar('推荐')

      TabContent() {
        Text('发现的内容').fontSize(30)
      }
      .tabBar('发现')

      TabContent() {
        Text('我的内容').fontSize(30)
      }
      .tabBar("我的")
    }
  }
}

pages/componens/user.ets页面

@Component
export  struct User{
  build(){
    Column(){
      Text("你好")
    }
  }
}

点击首页

点击推荐