創(chuàng)建輪播（Swiper）

2024-01-25 13:13 更新

Swiper組件提供滑動(dòng)輪播顯示的能力。Swiper本身是一個(gè)容器組件，當(dāng)設(shè)置了多個(gè)子組件后，可以對(duì)這些子組件進(jìn)行輪播顯示。通常，在一些應(yīng)用首頁(yè)顯示推薦的內(nèi)容時(shí)，需要用到輪播顯示的能力。

布局與約束

Swiper作為一個(gè)容器組件，在自身尺寸屬性未被設(shè)置時(shí)，會(huì)自動(dòng)根據(jù)子組件的大小設(shè)置自身的尺寸。如果開(kāi)發(fā)者對(duì)Swiper組件設(shè)置了固定的尺寸，則在輪播顯示過(guò)程中均以該尺寸生效；否則，在輪播過(guò)程中，會(huì)根據(jù)子組件的大小自動(dòng)調(diào)整自身的尺寸。

循環(huán)播放

通過(guò)loop屬性控制是否循環(huán)播放，該屬性默認(rèn)值為true。

當(dāng)loop為true時(shí)，在顯示第一頁(yè)或最后一頁(yè)時(shí)，可以繼續(xù)往前切換到前一頁(yè)或者往后切換到后一頁(yè)。如果loop為false，則在第一頁(yè)或最后一頁(yè)時(shí)，無(wú)法繼續(xù)向前或者向后切換頁(yè)面。

loop為true：
  1. ...
  2. private swiperController: SwiperController = new SwiperController()
  3. ...
  4. Swiper(this.swiperController) {
  5.   Text("0")
  6.     .width('90%')
  7.     .height('100%')
  8.     .backgroundColor(Color.Gray)
  9.     .textAlign(TextAlign.Center)
  10.     .fontSize(30)
  11. 

  12.   Text("1")
  13.     .width('90%')
  14.     .height('100%')
  15.     .backgroundColor(Color.Green)
  16.     .textAlign(TextAlign.Center)
  17.     .fontSize(30)
  18. 

  19.   Text("2")
  20.     .width('90%')
  21.     .height('100%')
  22.     .backgroundColor(Color.Blue)
  23.     .textAlign(TextAlign.Center)
  24.     .fontSize(30)
  25. }
  26. .loop(true)

loop為false：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Blue)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }
  23. .loop(false)

自動(dòng)輪播

Swiper通過(guò)設(shè)置autoPlay屬性，控制是否自動(dòng)輪播子組件。該屬性默認(rèn)值為false。

autoPlay為true時(shí)，會(huì)自動(dòng)切換播放子組件，子組件與子組件之間的播放間隔通過(guò)interval屬性設(shè)置。interval屬性默認(rèn)值為3000，單位毫秒。

autoPlay為true：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Pink)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }
  23. .loop(true)
  24. .autoPlay(true)
  25. .interval(1000)

導(dǎo)航點(diǎn)樣式

Swiper提供了默認(rèn)的導(dǎo)航點(diǎn)樣式，導(dǎo)航點(diǎn)默認(rèn)顯示在Swiper下方居中位置，開(kāi)發(fā)者也可以通過(guò)indicatorStyle屬性自定義導(dǎo)航點(diǎn)的位置和樣式。

通過(guò)indicatorStyle屬性，開(kāi)發(fā)者可以設(shè)置導(dǎo)航點(diǎn)相對(duì)于Swiper組件上下左右四個(gè)方位的位置，同時(shí)也可以設(shè)置每個(gè)導(dǎo)航點(diǎn)的尺寸、顏色、蒙層和被選中導(dǎo)航點(diǎn)的顏色。

導(dǎo)航點(diǎn)使用默認(rèn)樣式：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Pink)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }

自定義導(dǎo)航點(diǎn)樣式（示例：導(dǎo)航點(diǎn)直徑設(shè)為30VP，左邊距為0，導(dǎo)航點(diǎn)顏色設(shè)為紅色）：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Pink)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }
  23. .indicatorStyle({
  24.   size: 30,
  25.   left: 0,
  26.   color: Color.Red
  27. })

頁(yè)面切換方式

Swiper支持三種頁(yè)面切換方式：手指滑動(dòng)、點(diǎn)擊導(dǎo)航點(diǎn)和通過(guò)控制器。

通過(guò)控制器切換頁(yè)面：
  1. @Entry
  2. @Component
  3. struct SwiperDemo {
  4.   private swiperController: SwiperController = new SwiperController();
  5. 

  6.   build() {
  7.     Column({ space: 5 }) {
  8.       Swiper(this.swiperController) {
  9.         Text("0")
  10.           .width(250)
  11.           .height(250)
  12.           .backgroundColor(Color.Gray)
  13.           .textAlign(TextAlign.Center)
  14.           .fontSize(30)
  15.         Text("1")
  16.           .width(250)
  17.           .height(250)
  18.           .backgroundColor(Color.Green)
  19.           .textAlign(TextAlign.Center)
  20.           .fontSize(30)
  21.         Text("2")
  22.           .width(250)
  23.           .height(250)
  24.           .backgroundColor(Color.Pink)
  25.           .textAlign(TextAlign.Center)
  26.           .fontSize(30)
  27.       }
  28.       .indicator(true)
  29. 

  30.       Row({ space: 12 }) {
  31.         Button('showNext')
  32.           .onClick(() => {
  33.             this.swiperController.showNext(); // 通過(guò)controller切換到后一頁(yè)
  34.           })
  35.         Button('showPrevious')
  36.           .onClick(() => {
  37.             this.swiperController.showPrevious(); // 通過(guò)controller切換到前一頁(yè)
  38.           })
  39.       }.margin(5)
  40.     }.width('100%')
  41.     .margin({ top: 5 })
  42.   }
  43. }

輪播方向

Swiper支持水平和垂直方向上進(jìn)行輪播，主要通過(guò)vertical屬性控制。

當(dāng)vertical為true時(shí)，表示在垂直方向上進(jìn)行輪播；為false時(shí)，表示在水平方向上進(jìn)行輪播。vertical默認(rèn)值為false。

設(shè)置水平方向上輪播：
  1. Swiper(this.swiperController) {
  2.   ...
  3. }
  4. .indicator(true)
  5. .vertical(false)

設(shè)置垂直方向輪播：
  1. Swiper(this.swiperController) {
  2.   ...
  3. }
  4. .indicator(true)
  5. .vertical(true)

每頁(yè)顯示多個(gè)子頁(yè)面

Swiper支持在一個(gè)頁(yè)面內(nèi)同時(shí)顯示多個(gè)子組件，通過(guò)displayCount屬性設(shè)置。

設(shè)置一個(gè)頁(yè)面內(nèi)顯示兩個(gè)子組件：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width(250)
  4.     .height(250)
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8.   Text("1")
  9.     .width(250)
  10.     .height(250)
  11.     .backgroundColor(Color.Green)
  12.     .textAlign(TextAlign.Center)
  13.     .fontSize(30)
  14.   Text("2")
  15.     .width(250)
  16.     .height(250)
  17.     .backgroundColor(Color.Pink)
  18.     .textAlign(TextAlign.Center)
  19.     .fontSize(30)
  20.   Text("3")
  21.     .width(250)
  22.     .height(250)
  23.     .backgroundColor(Color.Blue)
  24.     .textAlign(TextAlign.Center)
  25.     .fontSize(30)
  26. }
  27. .indicator(true)
  28. .displayCount(2)

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)