輪播（Swiper）

Swiper組件提供滑動輪播顯示的能力。Swiper本身是一個容器組件，當設置了多個子組件后，可以對這些子組件進行輪播顯示。通常，在一些應用首頁顯示推薦的內容時，需要用到輪播顯示的能力。

針對復雜頁面場景，可以使用Swiper組件的預加載機制，利用主線程的空閑時間來提前構建和布局繪制組件，優化滑動體驗。

布局與約束

Swiper作為一個容器組件，如果設置了自身尺寸屬性，則在輪播顯示過程中均以該尺寸生效。如果自身尺寸屬性未被設置，則分兩種情況：

• 設置了prevMargin或者nextMargin屬性，則Swiper自身尺寸會跟隨其父組件；
• 未設置prevMargin或者nextMargin屬性，則會自動根據子組件的大小設置自身的尺寸。

常用屬性

屬性值	屬性描述	默認值
loop	循環播放	true
autoPlay	自動輪播	false
interval	播放間隔	3000，單位毫秒
indicator	導航點樣式	-
displayArrow	控制導航點箭頭的大小、位置、顏色，底板的大小及顏色，以及鼠標懸停時是否顯示箭頭	-
vertical	輪播方向	false
displayCount	在一個頁面內同時顯示多個子組件	-

選項卡（Tabs）

當頁面信息較多時，為了讓用戶能夠聚焦于當前顯示的內容，需要對頁面內容進行分類，提高頁面空間利用率。Tabs組件可以在一個頁面內快速實現視圖內容的切換，一方面提升查找信息的效率，另一方面精簡用戶單次獲取到的信息量。

基本布局

Tabs組件的頁面組成包含兩個部分，分別是TabContent和TabBar。TabContent是內容頁，TabBar是導航頁簽欄，頁面結構如下圖所示，根據不同的導航類型，布局會有區別，可以分為底部導航、頂部導航、側邊導航，其導航欄分別位于底部、頂部和側邊。

TabContent

每一個TabContent對應的內容需要有一個頁簽，可以通過TabContent的tabBar屬性進行配置。在如下TabContent組件上設置tabBar屬性，可以設置其對應頁簽中的內容，tabBar作為內容的頁簽。

 TabContent() {Text('首頁的內容').fontSize(30)}
.tabBar('首頁')

barPosition

barPosition用于設置Tabs的導航欄位置。

• BarPosition.Start：導航欄位于頂部，默認值
• BarPosition.End：導航欄位于底部

常見屬性

屬性名稱	屬性說明	屬性默認值
vertical	內容頁和導航欄垂直方向排列	false
scrollable	控制滑動切換	true
barMode	控制導航欄是否可以滾動	BarMode.Fixed

自定義導航欄

對于底部導航欄，一般作為應用主頁面功能區分，為了更好的用戶體驗，會組合文字以及對應語義圖標表示頁簽內容，這種情況下，需要自定義導航頁簽的樣式。

設置自定義導航欄需要使用tabBar的參數，以其支持的CustomBuilder的方式傳入自定義的函數組件樣式。例如這里聲明tabBuilder的自定義函數組件，傳入參數包括頁簽文字title，對應位置index，以及選中狀態和未選中狀態的圖片資源。通過當前活躍的currentIndex和頁簽對應的targetIndex匹配與否，決定UI顯示的樣式。

@Builder tabBuilder(title: string, targetIndex: number, selectedImg: Resource, normalImg: Resource) {Column() {Image(this.currentIndex === targetIndex ? selectedImg : normalImg).size({ width: 25, height: 25 })Text(title).fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')}.width('100%').height(50).justifyContent(FlexAlign.Center)
}