ArkUI学习-Tabs

1、简介：

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

官方学习链接：

说明:

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

2、普通使用

Tabs(){
  TabContent(){
    Text('首页内容')//有且只能一个组件
  }
  .tabBar('首页')//配置导航

  TabContent(){
    Text('推荐内容')//有且只能一个组件
  }
  .tabBar('推荐')//配置导航

  TabContent(){
    Text('发现内容')//有且只能一个组件
  }
  .tabBar('发现')//配置导航


  TabContent(){
    Text('我的内容')//有且只能一个组件
  }
  .tabBar('我的')//配置导航

}

2、属性使用

//当barPosition为Start(默认值).顶部排列；  End：底部排列
Tabs({ barPosition: BarPosition.Start }) {
  TabContent() {
    Text('首页内容') //有且只能一个组件
  }
  .tabBar('首页') //配置导航

  TabContent() {
    Text('推荐内容') //有且只能一个组件
  }
  .tabBar('推荐') //配置导航

  TabContent() {
    Text('发现内容') //有且只能一个组件
  }
  .tabBar('发现') //配置导航


  TabContent() {
    Text('我的内容') //有且只能一个组件
  }
  .tabBar('我的') //配置导航

}
.vertical(false) //默认是false，当为true时，左侧排列；
.scrollable(true) //是否开启手势滑动；
.animationDuration(0)//点击滑动的动画时间