頁簽切換容器組件TabsTabs概述Tabs是通過頁簽進行內(nèi)容視圖切換的容器組件，每個頁簽對應一個內(nèi)容視圖。它僅可包含子組件TabContent。每個TabContent對應的頁簽圖標和文字用屬性tabBar設置，Tabs的控制器和事件可以配合進行頁簽的切換控制。如右圖所示。接口描述：Tabs(value?:{barPosition?:BarPosition,index?:number,controller?:

TabsController})Tabs參數(shù)

private

controller:

TabsController

=

new

TabsController();…

Tabs({

barPosition:

BarPosition.End,

//指定頁簽位置

index:0,

//index：指定初始頁簽索引，默認值為

0

controller:

this.controller

//controller：設置Tabs控制器

})…其他代碼略Tabs通過參數(shù)來設置頁簽位置、初始頁簽索引和控制器。參數(shù)說明：參數(shù)名參數(shù)類型必填參數(shù)描述barPositionBarPosition否設置Tabs的頁簽位置。默認值：BarPosition.Startindexnumber否設置初始頁簽索引。默認值：0controllerTabsController否設置Tabs控制器。使用示例：Tabs的頁簽位置Tabs使用參數(shù)barPosition配合屬性vertical可指定頁簽出現(xiàn)的位置。Tabs子組件TabContentTabs的內(nèi)容視圖子組件TabContent，只在Tabs中使用，TabContent使用時不需要傳參數(shù)，它的tabBar屬性,用來設置tabBar顯示標簽。TabContent內(nèi)只能由一個子組件。tabBar的參數(shù)類型：string|Resource|CustomBuilder|{icon?:string|Resource,text?:string|Resource}Tabs子組件TabContent使用示例：Tabs({

barPosition:

BarPosition.End}){

TabContent()

{

Column(){

Text('消息頁').fontSize(50)}

.width('100%').height('100%').backgroundColor("#ffd1e0ef")

}.size({width:

"100%",

height:

"100%"})

//

.tabBar("消息")

//直接使用文字

.tabBar({icon:$r("app.media.icon"),text:"消息"})//使用圖標和文字…//其他TabContent略}Tabs的屬性Tabs除支持通用屬性外，還支持以下屬性。名稱參數(shù)類型描述verticalboolean設置為false是為橫向Tabs，設置為true時為縱向Tabs。默認值：falsescrollableboolean設置為true時可以通過滑動頁面進行頁面切換，為false時不可滑動切換頁面。默認值：truebarModeBarModeTabBar布局模式，具體描述見BarMode枚舉說明。默認值：BarMode.FixedbarWidthnumber|Length8+TabBar的寬度值。barHeightnumber|Length8+TabBar的高度值。animationDurationnumberTabContent滑動動畫時長。默認值：200BarMode.Scrollable:每一個TabBar均使用實際布局寬度，超過總長度（橫向Tabs的barWidth，縱向Tabs的barHeight）后可滑動。。BarMode.Fixed:所有TabBar平均分配barWidth寬度（縱向時平均分配barHeight高度）。Tabs的事件Tabs除支持通用事件外，還支持onChange事件。onChange(event:(index:number)=>void)：Tab頁簽切換后觸發(fā)的事件，可以在獲取箭頭函數(shù)的參數(shù)index。private

currentIndex: