閱讀(907) 書(shū)簽贊(0) 我要糾錯(cuò)

頁(yè)簽進(jìn)行內(nèi)容視圖切換的容器組件

2024-01-22 17:58 更新

通過(guò)頁(yè)簽進(jìn)行內(nèi)容視圖切換的容器組件，每個(gè)頁(yè)簽對(duì)應(yīng)一個(gè)內(nèi)容視圖。

說(shuō)明

該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

僅可包含子組件TabContent。

接口

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

參數(shù)：

參數(shù)名	參數(shù)類(lèi)型	必填	參數(shù)描述
barPosition	BarPosition	否	設(shè)置Tabs的頁(yè)簽位置。默認(rèn)值：BarPosition.Start
index	number	否	設(shè)置當(dāng)前顯示頁(yè)簽的索引。默認(rèn)值：0 說(shuō)明：設(shè)置為小于0的值時(shí)按默認(rèn)值顯示。可選值為[0, TabContent子節(jié)點(diǎn)數(shù)量-1]。設(shè)置不同值時(shí)，默認(rèn)生效切換動(dòng)效，可以設(shè)置animationDuration為0關(guān)閉動(dòng)畫(huà)。
controller	TabsController	否	設(shè)置Tabs控制器。

參數(shù)名

參數(shù)類(lèi)型

必填

參數(shù)描述

barPosition

BarPosition

否

設(shè)置Tabs的頁(yè)簽位置。

默認(rèn)值：BarPosition.Start

index

number

否

設(shè)置當(dāng)前顯示頁(yè)簽的索引。

默認(rèn)值：0

說(shuō)明：

設(shè)置為小于0的值時(shí)按默認(rèn)值顯示。

可選值為[0, TabContent子節(jié)點(diǎn)數(shù)量-1]。

設(shè)置不同值時(shí)，默認(rèn)生效切換動(dòng)效，可以設(shè)置animationDuration為0關(guān)閉動(dòng)畫(huà)。

controller

TabsController

否

設(shè)置Tabs控制器。

BarPosition枚舉說(shuō)明

名稱	描述
Start	vertical屬性方法設(shè)置為true時(shí)，頁(yè)簽位于容器左側(cè)；vertical屬性方法設(shè)置為false時(shí)，頁(yè)簽位于容器頂部。
End	vertical屬性方法設(shè)置為true時(shí)，頁(yè)簽位于容器右側(cè)；vertical屬性方法設(shè)置為false時(shí)，頁(yè)簽位于容器底部。

屬性

除支持通用屬性外，還支持以下屬性：

名稱	參數(shù)類(lèi)型	描述
vertical	boolean	設(shè)置為false是為橫向Tabs，設(shè)置為true時(shí)為縱向Tabs。默認(rèn)值：false
scrollable	boolean	設(shè)置為true時(shí)可以通過(guò)滑動(dòng)頁(yè)面進(jìn)行頁(yè)面切換，為false時(shí)不可滑動(dòng)切換頁(yè)面。默認(rèn)值：true
barMode	BarMode	TabBar布局模式，具體描述見(jiàn)BarMode枚舉說(shuō)明。默認(rèn)值：BarMode.Fixed
barWidth	number \| Length8+	TabBar的寬度值。默認(rèn)值：未設(shè)置帶樣式的TabBar且vertical屬性為false時(shí)，默認(rèn)值為T(mén)abs的寬度。未設(shè)置帶樣式的TabBar且vertical屬性為true時(shí)，默認(rèn)值為56vp。設(shè)置SubTabbarStyle樣式且vertical屬性為false時(shí)，默認(rèn)值為T(mén)abs的寬度。設(shè)置SubTabbarStyle樣式且vertical屬性為true時(shí)，默認(rèn)值為56vp。設(shè)置BottomTabbarStyle樣式且vertical屬性為true時(shí)，默認(rèn)值為96vp。設(shè)置BottomTabbarStyle樣式且vertical屬性為false時(shí)，默認(rèn)值為T(mén)abs的寬度。說(shuō)明：設(shè)置為小于0或大于Tabs寬度值時(shí)，按默認(rèn)值顯示。
barHeight	number \| Length8+	TabBar的高度值。默認(rèn)值：未設(shè)置帶樣式的TabBar且vertical屬性為false時(shí)，默認(rèn)值為56vp。未設(shè)置帶樣式的TabBar且vertical屬性為true時(shí)，默認(rèn)值為T(mén)abs的高度。設(shè)置SubTabbarStyle樣式且vertical屬性為false時(shí)，默認(rèn)值為56vp。設(shè)置SubTabbarStyle樣式且vertical屬性為true時(shí)，默認(rèn)值為T(mén)abs的高度。設(shè)置BottomTabbarStyle樣式且vertical屬性為true時(shí)，默認(rèn)值為T(mén)abs的高度。設(shè)置BottomTabbarStyle樣式且vertical屬性為false時(shí)，默認(rèn)值為56vp。說(shuō)明：設(shè)置為小于0或大于Tabs高度值時(shí)，按默認(rèn)值顯示。
animationDuration	number	點(diǎn)擊TabBar頁(yè)簽切換TabContent的動(dòng)畫(huà)時(shí)長(zhǎng)。不設(shè)置時(shí)，點(diǎn)擊TabBar頁(yè)簽切換TabContent無(wú)動(dòng)畫(huà)。默認(rèn)值：300 說(shuō)明：該參數(shù)不支持百分比設(shè)置；設(shè)置為小于0時(shí)，按默認(rèn)值300ms顯示。

BarMode枚舉說(shuō)明

名稱	描述
Scrollable	每一個(gè)TabBar均使用實(shí)際布局寬度，超過(guò)總長(zhǎng)度（橫向Tabs的barWidth，縱向Tabs的barHeight）后可滑動(dòng)。
Fixed	所有TabBar平均分配barWidth寬度（縱向時(shí)平均分配barHeight高度）。

事件

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

名稱	功能描述
onChange(event: (index: number) => void)	Tab頁(yè)簽切換后觸發(fā)的事件。 - index：當(dāng)前顯示的index索引，索引從0開(kāi)始計(jì)算。觸發(fā)該事件的條件： 1、TabContent支持滑動(dòng)時(shí)，組件觸發(fā)滑動(dòng)時(shí)觸發(fā)。 2、通過(guò)控制器API接口調(diào)用。 3、通過(guò)狀態(tài)變量構(gòu)造的屬性值進(jìn)行修改。 4、通過(guò)頁(yè)簽處點(diǎn)擊觸發(fā)。

名稱

功能描述

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

Tab頁(yè)簽切換后觸發(fā)的事件。

- index：當(dāng)前顯示的index索引，索引從0開(kāi)始計(jì)算。

觸發(fā)該事件的條件：

1、TabContent支持滑動(dòng)時(shí)，組件觸發(fā)滑動(dòng)時(shí)觸發(fā)。

2、通過(guò)控制器API接口調(diào)用。

3、通過(guò)狀態(tài)變量構(gòu)造的屬性值進(jìn)行修改。

4、通過(guò)頁(yè)簽處點(diǎn)擊觸發(fā)。

TabsController

Tabs組件的控制器，用于控制Tabs組件進(jìn)行頁(yè)簽切換。不支持一個(gè)TabsController控制多個(gè)Tabs組件。

導(dǎo)入對(duì)象


controller: TabsController = new TabsController()

changeIndex

changeIndex(value: number): void

控制Tabs切換到指定頁(yè)簽。

參數(shù)：

參數(shù)名	參數(shù)類(lèi)型	必填	參數(shù)描述
value	number	是	頁(yè)簽在Tabs里的索引值，索引值從0開(kāi)始。說(shuō)明：設(shè)置小于0或大于最大數(shù)量的值時(shí)，該事件失效。

參數(shù)名

參數(shù)類(lèi)型

必填

參數(shù)描述

value

number

是

頁(yè)簽在Tabs里的索引值，索引值從0開(kāi)始。

說(shuō)明：

設(shè)置小于0或大于最大數(shù)量的值時(shí)，該事件失效。

示例


// xxx.ets
@Entry
@Component
struct TabsExample {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()

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

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

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

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

        TabContent() {
          Column().width('100%').height('100%').backgroundColor('#E67C92')
        }.tabBar(this.TabBuilder(3, 'pink'))
      }
      .vertical(false)
      .barMode(BarMode.Fixed)
      .barWidth(360)
      .barHeight(56)
      .animationDuration(400)
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .width(360)
      .height(296)
      .margin({ top: 52 })
      .backgroundColor('#F1F3F5')
    }.width('100%')
  }
}

以上內(nèi)容是否對(duì)您有幫助：

← 滑塊視圖容器

切換頁(yè)簽的內(nèi)容視圖 →

寫(xiě)筆記

我要補(bǔ)充

頁(yè)簽進(jìn)行內(nèi)容視圖切換的容器組件

子組件

接口

BarPosition枚舉說(shuō)明

屬性

BarMode枚舉說(shuō)明

事件

TabsController

導(dǎo)入對(duì)象

changeIndex

示例

推薦文章

推薦教程

推薦課程