滑塊視圖容器

2024-01-22 17:58 更新

滑塊視圖容器，提供子組件滑動輪播顯示的能力。

說明

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

子組件

可以包含子組件。

說明

子組件類型：系統(tǒng)組件和自定義組件，支持渲染控制類型（if/else、ForEach和LazyForEach）。

Swiper子組件的visibility屬性設(shè)置為None，Swiper的displayMode屬性設(shè)置為SwiperDisplayMode.AutoLinear或displayCount屬性設(shè)置為'auto'時，對應(yīng)子組件在視窗內(nèi)不占位，但不影響導(dǎo)航點個數(shù)。

Swiper子組件的visibility屬性設(shè)置為None，或者visibility屬性設(shè)置為Hidden時，對應(yīng)子組件不顯示，但依然會在視窗內(nèi)占位。

接口

Swiper(controller?: SwiperController)

參數(shù)：

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

controller

SwiperController

否

給組件綁定一個控制器，用來控制組件翻頁。

屬性

除支持通用屬性外，還支持以下屬性，不支持Menu控制。

名稱

參數(shù)類型

描述

index

number

設(shè)置當(dāng)前在容器中顯示的子組件的索引值。

默認(rèn)值：0

說明：

設(shè)置小于0或大于等于子組件數(shù)量時，按照默認(rèn)值0處理。

autoPlay

boolean

子組件是否自動播放。

默認(rèn)值：false

說明：

loop為false時，自動輪播到最后一頁時停止輪播。手勢切換后不是最后一頁時繼續(xù)播放。

interval

number

使用自動播放時播放的時間間隔，單位為毫秒。

默認(rèn)值：3000

indicator

boolean

是否啟用導(dǎo)航點指示器。

默認(rèn)值：true

loop

boolean

是否開啟循環(huán)。

設(shè)置為true時表示開啟循環(huán)，在LazyForEach懶循環(huán)加載模式下，加載的組件數(shù)量建議大于5個。

默認(rèn)值：true

duration

number

子組件切換的動畫時長，單位為毫秒。

默認(rèn)值：400

vertical

boolean

是否為縱向滑動。

默認(rèn)值：false

itemSpace

number | string

設(shè)置子組件與子組件之間間隙。

默認(rèn)值：0

說明：

不支持設(shè)置百分比。

displayMode

SwiperDisplayMode

主軸方向上元素排列的模式，優(yōu)先以displayCount設(shè)置的個數(shù)顯示，displayCount未設(shè)置時本屬性生效。

默認(rèn)值：SwiperDisplayMode.Stretch

cachedCount8+

number

設(shè)置預(yù)加載子組件個數(shù)。

默認(rèn)值：1

disableSwipe8+

boolean

禁用組件滑動切換功能。

默認(rèn)值：false

curve8+

Curve | string

設(shè)置Swiper的動畫曲線，默認(rèn)為淡入淡出曲線，常用曲線參考Curve枚舉說明，也可以通過插值計算模塊提供的接口創(chuàng)建自定義的插值曲線對象。

默認(rèn)值：Curve.Linear

indicatorStyle8+

{

left?: Length,

top?: Length,

right?: Length,

bottom?: Length,

size?: Length,

mask?: boolean,

color?: ResourceColor,

selectedColor?: ResourceColor

}

設(shè)置導(dǎo)航點樣式：

- left: 設(shè)置導(dǎo)航點距離Swiper組件左邊的距離。

- top: 設(shè)置導(dǎo)航點距離Swiper組件頂部的距離。

- right: 設(shè)置導(dǎo)航點距離Swiper組件右邊的距離。

- bottom: 設(shè)置導(dǎo)航點距離Swiper組件底部的距離。

- size: 設(shè)置導(dǎo)航點的直徑。不支持設(shè)置百分比。默認(rèn)值：6vp。

- mask: 設(shè)置是否顯示導(dǎo)航點蒙層樣式。

- color: 設(shè)置導(dǎo)航點的顏色。

- selectedColor: 設(shè)置選中的導(dǎo)航點的顏色。

displayCount8+

number|string

設(shè)置一頁內(nèi)元素顯示個數(shù)。

默認(rèn)值：1

說明：

字符串類型僅支持設(shè)置為'auto'，顯示效果同SwiperDisplayMode.AutoLinear。

使用number類型且設(shè)置小于等于0時，按默認(rèn)值1顯示。

使用number類型時，子組件按照主軸均分Swiper寬度（減去displayCount-1的itemSpace）的方式進(jìn)行主軸拉伸（收縮）布局。

effectMode8+

EdgeEffect

滑動效果，目前支持的滑動效果參見EdgeEffect的枚舉說明。

默認(rèn)值：EdgeEffect.Spring

說明：

控制器接口調(diào)用時不生效回彈。

SwiperDisplayMode枚舉說明

名稱

描述

Stretch

Swiper滑動一頁的寬度為Swiper組件自身的寬度。

AutoLinear

Swiper滑動一頁的寬度為子組件寬度中的最大值。

SwiperController

Swiper容器組件的控制器，可以將此對象綁定至Swiper組件，然后通過它控制翻頁。

showNext

showNext(): void

翻至下一頁。翻頁帶動效切換過程，時長通過duration指定。

showPrevious

showPrevious(): void

翻至上一頁。翻頁帶動效切換過程，時長通過duration指定。

finishAnimation

finishAnimation(callback?: () => void): void

停止播放動畫。

參數(shù)：

參數(shù)名

參數(shù)類型

必填項

參數(shù)描述

callback

() => void

否

動畫結(jié)束的回調(diào)。

事件

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

名稱

功能描述

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

當(dāng)前顯示的子組件索引變化時觸發(fā)該事件,返回值為當(dāng)前顯示的子組件的索引值。

- index:當(dāng)前顯示元素的索引。

說明：

Swiper組件結(jié)合LazyForEach使用時，不能在onChange事件里觸發(fā)子頁面UI的刷新。

onAnimationStart9+(event: (index: number) => void)

切換動畫開始時觸發(fā)該回調(diào)。

- index:當(dāng)前顯示元素的索引。

說明：

參數(shù)為動畫開始前的index值（不是最終結(jié)束動畫的index值），多列Swiper時，index為最左側(cè)組件的索引。

onAnimationEnd9+(event: (index: number) => void)

切換動畫結(jié)束時觸發(fā)該回調(diào)。

- index:當(dāng)前顯示元素的索引。

說明：

當(dāng)Swiper切換動效結(jié)束時觸發(fā)，包括動畫過程中手勢中斷，通過SwiperController調(diào)用finishAnimation。參數(shù)為動畫結(jié)束后的index值，多列Swiper時，index為最左側(cè)組件的索引。

示例

  1. // xxx.ets
  2. class MyDataSource implements IDataSource {
  3.   private list: number[] = []
  4.   private listener: DataChangeListener
  5. 

  6.   constructor(list: number[]) {
  7.     this.list = list
  8.   }
  9. 

  10.   totalCount(): number {
  11.     return this.list.length
  12.   }
  13. 

  14.   getData(index: number): any {
  15.     return this.list[index]
  16.   }
  17. 

  18.   registerDataChangeListener(listener: DataChangeListener): void {
  19.     this.listener = listener
  20.   }
  21. 

  22.   unregisterDataChangeListener() {
  23.   }
  24. }
  25. 

  26. @Entry
  27. @Component
  28. struct SwiperExample {
  29.   private swiperController: SwiperController = new SwiperController()
  30.   private data: MyDataSource = new MyDataSource([])
  31. 

  32.   aboutToAppear(): void {
  33.     let list = []
  34.     for (var i = 1; i <= 10; i++) {
  35.       list.push(i.toString());
  36.     }
  37.     this.data = new MyDataSource(list)
  38.   }
  39. 

  40.   build() {
  41.     Column({ space: 5 }) {
  42.       Swiper(this.swiperController) {
  43.         LazyForEach(this.data, (item: string) => {
  44.           Text(item).width('90%').height(160).backgroundColor(0xAFEEEE).textAlign(TextAlign.Center).fontSize(30)
  45.         }, item => item)
  46.       }
  47.       .cachedCount(2)
  48.       .index(1)
  49.       .autoPlay(true)
  50.       .interval(4000)
  51.       .indicator(true)
  52.       .loop(true)
  53.       .duration(1000)
  54.       .itemSpace(0)
  55.       .curve(Curve.Linear)
  56.       .onChange((index: number) => {
  57.         console.info(index.toString())
  58.       })
  59. 

  60.       Row({ space: 12 }) {
  61.         Button('showNext')
  62.           .onClick(() => {
  63.             this.swiperController.showNext()
  64.           })
  65.         Button('showPrevious')
  66.           .onClick(() => {
  67.             this.swiperController.showPrevious()
  68.           })
  69.       }.margin(5)
  70.     }.width('100%')
  71.     .margin({ top: 5 })
  72.   }
  73. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號