ArkUI Swiper组件用法详解（附带实例）

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

一般情况下，在一些应用首页显示推荐的内容时，需要用到轮播显示的功能。

针对复杂页面场景，可以使用 Swiper 组件的预加载机制，利用主线程的空闲时间来提前构建和布局要绘制的组件，从而优化滑动体验。

Swiper布局与约束

如果 Swiper 组件设置了自身尺寸属性，则在轮播过程中均以该尺寸显示。

如果 Swiper 自身尺寸属性未被设置，则分为两种情况：

• 如果设置了 prevMargin 或者 nextMargin 属性，则 Swiper 自身尺寸会跟随其父组件；
• 如果未设置 prevMargin 或者 nextMargin 属性，则会自动根据子组件的大小设置 Swiper 自身的尺寸。

Swiper循环播放

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

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

当 loop 为 true 时，示例代码如下：

@Entry
@Component
struct SwiperSample {
  build() {
    Row() {
      // 轮播组件
      Swiper() {
        // 子组件
        Text('0')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)

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

        Text('2')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      // 设置子组件循环播放
      .loop(true)
    } 
    .height(200)
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

显示效果如下图所示：


当 loop 为 false 时，示例代码如下：

@Entry
@Component
struct SwiperSample {
  build() {
    Row() {
      // 轮播组件
      Swiper() {
        // 子组件
        Text('0')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)

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

        Text('2')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      // 设置禁止子组件循环播放
      .loop(false)
    } 
    .height(200)
    .width('100%')
    .border({ width: 2 })
    .justifyContent(FlexAlign.Center)
  }
}

显示效果如下图所示：


当向右滑动到最后一个子组件时，无法继续滑动。同时从第一个子组件向左也无法滑动，如下图所示。

Swiper自动轮播

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

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

自动轮播的示例代码如下：

@Entry
@Component
struct SwiperSample {
  build() {
    Row() {
      // 轮播组件
      Swiper() {
        // 子组件
        Text('0')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30);

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

        Text('2')
          .width('90%')
          .height('100%')
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30);
      }
      // 设置循环播放子组件，设置自动播放，设置自动播放的时间间隔为 1000 毫秒
      .loop(true)
      .autoPlay(true)
      .interval(1000)
    }
    .height(200)
    .width('100%')
    .border({ width: 2 })
    .justifyContent(FlexAlign.Center); 
  }
}