Swiper轮播

Swiper轮播

Swiper组件是一个可以提供滑动轮播显示能力的容器组件。当我们设置多个子组件后，可以对这些子组件进行一个轮播显示的效果。这个效果一般应用于首页显示推荐的内容轮播。

1. 基本用法

1. 轮播内容：内容作为Swiper的子组件即可

2. 尺寸： a. 设置Swiper的尺寸：内容会拉伸和Swiper一致（优先级高） b. 设置内容尺寸：内容会将Swiper组件撑开

   常用属性

示例

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Column() {
      Swiper() {
        Text('1')
          .backgroundColor(Color.Orange )
          .width('100%')
          .height(150)
        Text('2')
          .backgroundColor(Color.Grey  )
          .width('100%')
          .height(150)
        Text('3')
          .backgroundColor(Color.Blue )
          .width('100%')
          .height(150)
      }
      .width('100%')
      .autoPlay(true)
      .interval(3000)

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

2. 调整导航点

导航点的调整：

1. 显示 / 隐藏

2. 导航点的类型：1 圆点 2 数字

3. 确定类型之后，调整位置及外观

位置

常见样式

使用按钮切换页面