codecamp

页签进行内容视图切换的容器组件

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

仅可包含子组件TabContent。

接口

Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: TabsController})

参数：

参数名

参数类型

必填

参数描述

barPosition

BarPosition

否

设置Tabs的页签位置。

默认值：BarPosition.Start

index

number

否

设置当前显示页签的索引。

默认值：0

说明：

设置为小于0的值时按默认值显示。

可选值为[0, TabContent子节点数量-1]。

设置不同值时，默认生效切换动效，可以设置animationDuration为0关闭动画。

controller

TabsController

否

设置Tabs控制器。

BarPosition枚举说明

名称

描述

Start

vertical属性方法设置为true时，页签位于容器左侧；vertical属性方法设置为false时，页签位于容器顶部。

End

vertical属性方法设置为true时，页签位于容器右侧；vertical属性方法设置为false时，页签位于容器底部。

属性

除支持通用属性外，还支持以下属性：

名称

参数类型

描述

vertical

boolean

设置为false是为横向Tabs，设置为true时为纵向Tabs。

默认值：false

scrollable

boolean

设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。

默认值：true

barMode

BarMode

TabBar布局模式，具体描述见BarMode枚举说明。

默认值：BarMode.Fixed

barWidth

number | Length8+

TabBar的宽度值。

默认值：

未设置带样式的TabBar且vertical属性为false时，默认值为Tabs的宽度。

未设置带样式的TabBar且vertical属性为true时，默认值为56vp。

设置SubTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。

设置SubTabbarStyle样式且vertical属性为true时，默认值为56vp。

设置BottomTabbarStyle样式且vertical属性为true时，默认值为96vp。

设置BottomTabbarStyle样式且vertical属性为false时，默认值为Tabs的宽度。

说明：

设置为小于0或大于Tabs宽度值时，按默认值显示。

barHeight

number | Length8+

TabBar的高度值。

默认值：

未设置带样式的TabBar且vertical属性为false时，默认值为56vp。

未设置带样式的TabBar且vertical属性为true时，默认值为Tabs的高度。

设置SubTabbarStyle样式且vertical属性为false时，默认值为56vp。

设置SubTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。

设置BottomTabbarStyle样式且vertical属性为true时，默认值为Tabs的高度。

设置BottomTabbarStyle样式且vertical属性为false时，默认值为56vp。

说明：

设置为小于0或大于Tabs高度值时，按默认值显示。

animationDuration

number

点击TabBar页签切换TabContent的动画时长。不设置时，点击TabBar页签切换TabContent无动画。

默认值：300

说明：

该参数不支持百分比设置；设置为小于0时，按默认值300ms显示。

BarMode枚举说明

名称

描述

Scrollable

每一个TabBar均使用实际布局宽度，超过总长度（横向Tabs的barWidth，纵向Tabs的barHeight）后可滑动。

Fixed

所有TabBar平均分配barWidth宽度（纵向时平均分配barHeight高度）。

事件

除支持通用事件外，还支持以下事件：

名称

功能描述

onChange(event: (index: number) => void)

Tab页签切换后触发的事件。

- index：当前显示的index索引，索引从0开始计算。

触发该事件的条件：

1、TabContent支持滑动时，组件触发滑动时触发。

2、通过控制器API接口调用。

3、通过状态变量构造的属性值进行修改。

4、通过页签处点击触发。

TabsController

Tabs组件的控制器，用于控制Tabs组件进行页签切换。不支持一个TabsController控制多个Tabs组件。

导入对象

  1. controller: TabsController = new TabsController()

changeIndex

changeIndex(value: number): void

控制Tabs切换到指定页签。

参数：

参数名

参数类型

必填

参数描述

value

number

是

页签在Tabs里的索引值，索引值从0开始。

说明：

设置小于0或大于最大数量的值时，该事件失效。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct TabsExample {
  5.   @State fontColor: string = '#182431'
  6.   @State selectedFontColor: string = '#007DFF'
  7.   @State currentIndex: number = 0
  8.   private controller: TabsController = new TabsController()
  9. 

  10.   @Builder TabBuilder(index: number, name: string) {
  11.     Column() {
  12.       Text(name)
  13.         .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
  14.         .fontSize(16)
  15.         .fontWeight(this.currentIndex === index ? 500 : 400)
  16.         .lineHeight(22)
  17.         .margin({ top: 17, bottom: 7 })
  18.       Divider()
  19.         .strokeWidth(2)
  20.         .color('#007DFF')
  21.         .opacity(this.currentIndex === index ? 1 : 0)
  22.     }.width('100%')
  23.   }
  24. 

  25.   build() {
  26.     Column() {
  27.       Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
  28.         TabContent() {
  29.           Column().width('100%').height('100%').backgroundColor('#00CB87')
  30.         }.tabBar(this.TabBuilder(0, 'green'))
  31. 

  32.         TabContent() {
  33.           Column().width('100%').height('100%').backgroundColor('#007DFF')
  34.         }.tabBar(this.TabBuilder(1, 'blue'))
  35. 

  36.         TabContent() {
  37.           Column().width('100%').height('100%').backgroundColor('#FFBF00')
  38.         }.tabBar(this.TabBuilder(2, 'yellow'))
  39. 

  40.         TabContent() {
  41.           Column().width('100%').height('100%').backgroundColor('#E67C92')
  42.         }.tabBar(this.TabBuilder(3, 'pink'))
  43.       }
  44.       .vertical(false)
  45.       .barMode(BarMode.Fixed)
  46.       .barWidth(360)
  47.       .barHeight(56)
  48.       .animationDuration(400)
  49.       .onChange((index: number) => {
  50.         this.currentIndex = index
  51.       })
  52.       .width(360)
  53.       .height(296)
  54.       .margin({ top: 52 })
  55.       .backgroundColor('#F1F3F5')
  56.     }.width('100%')
  57.   }
  58. }

滑块视图容器
切换页签的内容视图
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录

通用事件

通用属性

手势处理

基础组件

容器组件

媒体组件

绘制组件

画布组件

动画

弹窗

生命周期

状态管理

像素

枚举

类型

接口

错误码合集

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }