Swiper

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

說明：

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

子組件

可以包含子組件。

說明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
子組件類型：系統(tǒng)組件和自定義組件，支持渲染控制類型（[if/else]、[ForEach]和[LazyForEach]）。

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

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

當(dāng)Swiper子組件個(gè)數(shù)小于等于Swiper組件內(nèi)容區(qū)內(nèi)顯示的節(jié)點(diǎn)總個(gè)數(shù)(totalDisplayCount = DisplayCount + prevMargin? (1 : 0 ) + nextMargin? (1 : 0 ))時(shí)，按照非循環(huán)模式布局處理，此時(shí)，前后邊距對(duì)應(yīng)子組件不顯示，但依然會(huì)在視窗內(nèi)占位。Swiper組件按照totalDisplayCount個(gè)數(shù)判斷測(cè)算規(guī)格。

接口

Swiper(controller?: SwiperController)

參數(shù)：

屬性

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

SwiperDisplayMode枚舉說明

SwiperController

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

showNext

showNext(): void

翻至下一頁。翻頁帶動(dòng)效切換過程，時(shí)長通過duration指定。

showPrevious

showPrevious(): void

翻至上一頁。翻頁帶動(dòng)效切換過程，時(shí)長通過duration指定。

finishAnimation

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

停止播放動(dòng)畫。

參數(shù)：

Indicator10+

設(shè)置導(dǎo)航點(diǎn)距離Swiper組件距離。

DotIndicator10+

圓點(diǎn)指示器屬性及功能繼承自Indicator。

DigitIndicator10+

數(shù)字指示器屬性及功能繼承自Indicator。

ArrowStyle10+

左右箭頭屬性。

SwiperAutoFill10+

自適應(yīng)屬性。

事件

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

示例

示例1

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) = > {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) = > item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(true)
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .displayArrow({
        showBackground: true,
        isSidebarMiddle: true,
        backgroundSize: 24,
        backgroundColor: Color.White,
        arrowSize: 18,
        arrowColor: Color.Blue
      }, false)
      .curve(Curve.Linear)
      .onChange((index: number) = > {
        console.info(index.toString())
      })
      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) = > {
        console.info("index: " + index)
        console.info("current offset: " + extraInfo.currentOffset)
      })
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) = > {
        console.info("index: " + index)
        console.info("targetIndex: " + targetIndex)
        console.info("current offset: " + extraInfo.currentOffset)
        console.info("target offset: " + extraInfo.targetOffset)
        console.info("velocity: " + extraInfo.velocity)
      })
      .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) = > {
        console.info("index: " + index)
        console.info("current offset: " + extraInfo.currentOffset)
      })

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() = > {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() = > {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

示例2

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) = > {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) = > item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(Indicator.dot()
        .itemWidth(15)
        .itemHeight(15)
        .selectedItemWidth(15)
        .selectedItemHeight(15)
        .color(Color.Gray)
        .selectedColor(Color.Blue))
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .displayArrow(true, true)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() = > {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() = > {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

示例3

// xxx.ets
class MyDataSource implements IDataSource {
  private list: number[] = []

  constructor(list: number[]) {
    this.list = list
  }

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): number {
    return this.list[index]
  }

  registerDataChangeListener(listener: DataChangeListener): void {
  }

  unregisterDataChangeListener() {
  }
}

@Entry
@Component
struct SwiperExample {
  private swiperController: SwiperController = new SwiperController()
  private data: MyDataSource = new MyDataSource([])

  aboutToAppear(): void {
    let list: number[] = []
    for (let i = 1; i <= 10; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list)
  }

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) = > {
          Text(item.toString())
            .width('90%')
            .height(160)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) = > item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(true)
      .interval(4000)
      .indicator(Indicator.digit()
        .right("43%")
        .top(200)
        .fontColor(Color.Gray)
        .selectedFontColor(Color.Gray)
        .digitFont({ size: 20, weight: FontWeight.Bold })
        .selectedDigitFont({ size: 20, weight: FontWeight.Normal }))
      .loop(true)
      .duration(1000)
      .itemSpace(0)
      .displayArrow(true, false)

      Row({ space: 12 }) {
        Button('showNext')
          .onClick(() = > {
            this.swiperController.showNext()
          })
        Button('showPrevious')
          .onClick(() = > {
            this.swiperController.showPrevious()
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

審核編輯 黃宇