鸿蒙开发系列教程（二十一）--轮播处理

news2025/1/18 8:43:22

轮播处理

Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示

在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身的尺寸

参数：

通过loop属性控制是否循环播放，该属性默认值为true。
通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false
通过indicatorStyle属性自定义导航点的位置和样式

语法：

1、创建轮播实例对象–SwiperController系统函数
private swiperController: SwiperController = new SwiperController()

2、创建轮播容器

Swiper(this.swiperController) {

3、轮播内容

}

.参数1

.参数2

…

示例1

@Entry
@Component
struct Test03 {
  //创建轮播实例对象--SwiperController系统函数
  private swiperController: SwiperController = new SwiperController()

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text("轮播图1")
          .width('90%')
          .height('100%')
          .backgroundImage($r('app.media.s0'))
          .backgroundImageSize({"width":"100%","height":"100%"})
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text("轮播图2")
          .width('90%')
          .height('100%')
          .backgroundImage($r('app.media.s3'))
          .backgroundImageSize({"width":"100%","height":"100%"})
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text("轮播图3")
          .width('90%')
          .height('100%')
          .backgroundImage($r('app.media.s4'))
          .backgroundImageSize({"width":"100%","height":"100%"})
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .autoPlay(true)
      .interval(1000)
      .indicatorStyle({
        size: 80,
        left: 0,
        color: Color.Red
      })

    }.height('100%').width('100%')
  }
}

请添加图片描述

手动导航

@Entry
@Component
struct Test03 {
  //创建轮播实例对象--SwiperController系统函数
  private swiperController: SwiperController = new SwiperController()

  build() {
    Column() {
      Swiper(this.swiperController) {
        Text("轮播图1")
          .width('90%')
          .height('100%')
          .backgroundImage($r('app.media.s0'))
          .backgroundImageSize({"width":"100%","height":"100%"})
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text("轮播图2")
          .width('90%')
          .height('100%')
          .backgroundImage($r('app.media.s3'))
          .backgroundImageSize({"width":"100%","height":"100%"})
          .textAlign(TextAlign.Center)
          .fontSize(30)

        Text("轮播图3")
          .width('90%')
          .height('100%')
          .backgroundImage($r('app.media.s4'))
          .backgroundImageSize({"width":"100%","height":"100%"})
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .loop(true)
      .autoPlay(true)
      .interval(1000)
      .indicatorStyle({
        size: 80,
        left: 0,
        color: Color.Red
      })

      Row({ space: 12 }) {
        Button('下一个')
          .onClick(() => {
            this.swiperController.showNext(); // 通过controller切换到后一页
          })
        Button('前一个')
          .onClick(() => {
            this.swiperController.showPrevious(); // 通过controller切换到前一页
          })
      }.margin(5)

    }.height('70%').width('100%')
  }
}

请添加图片描述