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

2024-01-25 13:13 更新

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

布局與約束

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

循環(huán)播放

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

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

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)

自動輪播

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

autoPlay為true時，會自動切換播放子組件，子組件與子組件之間的播放間隔通過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)航點樣式

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

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

導(dǎo)航點使用默認(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)航點樣式（示例：導(dǎo)航點直徑設(shè)為30VP，左邊距為0，導(dǎo)航點顏色設(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. })

頁面切換方式

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

通過控制器切換頁面：
  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(); // 通過controller切換到后一頁
  34.           })
  35.         Button('showPrevious')
  36.           .onClick(() => {
  37.             this.swiperController.showPrevious(); // 通過controller切換到前一頁
  38.           })
  39.       }.margin(5)
  40.     }.width('100%')
  41.     .margin({ top: 5 })
  42.   }
  43. }

輪播方向

Swiper支持水平和垂直方向上進行輪播，主要通過vertical屬性控制。

當(dāng)vertical為true時，表示在垂直方向上進行輪播；為false時，表示在水平方向上進行輪播。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)

每頁顯示多個子頁面

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

設(shè)置一個頁面內(nèi)顯示兩個子組件：
  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)容是否對您有幫助：
在線筆記
App下載
公眾號
微信公眾號

編程獅公眾號