鸿蒙Harmnoy--轮播组件Swiper详解

袁震

已于 2024-07-22 11:28:19 修改

阅读量617

点赞数 9

分类专栏：鸿蒙开发文章标签：移动开发 harmony 鸿蒙客户端开发

于 2024-07-12 21:11:29 首次发布

本文链接：https://blog.csdn.net/y2653904/article/details/140387704

版权

鸿蒙开发专栏收录该内容

24 篇文章 15 订阅

订阅专栏

东风夜放花千树。更吹落，星如雨。宝马雕车香满路。
凤箫声动，玉壶光转，一夜鱼龙舞。
蛾儿雪柳黄金缕。笑语盈盈暗香去。众里寻他千百度，
蓦然回首，那人却在，灯火阑珊处。

目录

一，介绍

二，循环播放

三，自动轮播

四，导航点样式

五，轮播方向

六，每页显示多个子页面

一，介绍

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。

Swiper作为一个容器组件，如果设置了自身尺寸属性，则在轮播显示过程中均以该尺寸生效。如果自身尺寸属性未被设置，则分两种情况：如果设置了prevMargin或者nextMargin属性，则Swiper自身尺寸会跟随其父组件；如果未设置prevMargin或者nextMargin属性，则会自动根据子组件的大小设置自身的尺寸。

二，循环播放

通过loop属性控制是否循环播放，该属性默认值为true。

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

@Entry
@Component
struct TestPage {
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {

  }


  aboutToDisappear() {
    // do nothing
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('yz1')
          .fontColor(Color.White)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz3')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
    }
  }
}

loop为false：

@Entry
@Component
struct TestPage {
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {

  }


  aboutToDisappear() {
    // do nothing
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('yz1')
          .fontColor(Color.White)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz3')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(false)
    }
  }
}

三，自动轮播

Swiper通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。

autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000，单位毫秒。

@Entry
@Component
struct TestPage {
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {

  }


  aboutToDisappear() {
    // do nothing
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('yz1')
          .fontColor(Color.White)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz3')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .autoPlay(true)
      .interval(1000)
    }
  }
}

四，导航点样式

Swiper提供了默认的导航点样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicatorStyle属性自定义导航点的位置和样式。

通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

@Entry
@Component
struct TestPage {
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {

  }


  aboutToDisappear() {
    // do nothing
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('yz1')
          .fontColor(Color.White)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz3')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Orange)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .autoPlay(true)
      .interval(1000)
      .indicator(
        Indicator.dot()
          .left(0)
          .itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(30)
          .selectedItemHeight(15)
          .color(Color.Red)
          .selectedColor(Color.Blue)
      )
    }
  }
}

五，轮播方向

Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制。

当vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false。

水平方向的轮播之前已经展示了，下面说下垂直方向的轮播：

@Entry
@Component
struct TestPage {
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {

  }


  aboutToDisappear() {
    // do nothing
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('yz1')
          .fontColor(Color.White)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz3')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Orange)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .autoPlay(true)
      .interval(1000)
      .indicator(
        Indicator.dot()
          .left(0)
          .itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(30)
          .selectedItemHeight(15)
          .color(Color.Red)
          .selectedColor(Color.Blue)
      )
      .vertical(true)
    }
  }
}

六，每页显示多个子页面

Swiper支持在一个页面内同时显示多个子组件，通过displaycount设置

@Entry
@Component
struct TestPage {
  private swiperController: SwiperController = new SwiperController()

  aboutToAppear() {

  }


  aboutToDisappear() {
    // do nothing
  }

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text('yz1')
          .fontColor(Color.White)
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Black)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz2')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text('yz3')
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Orange)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .indicator(
        Indicator.dot()
          .left(0)
          .itemWidth(15)
          .itemHeight(15)
          .selectedItemWidth(30)
          .selectedItemHeight(15)
          .color(Color.Red)
          .selectedColor(Color.Blue)
      )
      .displayCount(3)
    }
  }
}