Swiper

轮播图组件Swiper的基本使用

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

基本语法：

Swiper() {
  // 轮播内容 
  // (设置尺寸，撑开swiper)
}
// 设置尺寸（内容拉伸、优先级高）
.width('100%')
.height(100)

常用属性：

loop：是否循环播放 -默认为true

autoPlay:-true:自动播放 -false：手动播放

interval:播放的时间间隔（ms为单位）

vertical：是否纵向滑动 默认：false

导航栏调整

.indictor（boolean）:隐藏导航栏

.indicator(Indicator.dot()) // 圆点指示器（默认）常用

.indicator(Indicator.digit()) // 数字指示器

Swiper(){
  // 略
}
  .indicator(
    Indicator.dot()
      // .xxx(设置圆点指示器的属性)
  ) // 圆点指示器（默认）

xxx可为：

1：位置

left:距离组件左边的距离

right:距离组件右边的距离

top:距离组件上边的距离

bottom:距离组件下边的距离

2：样式

itemWidt：导航栏圆点的宽（默认值6vp），不支持百分百比

itemHeight：导航栏圆点的高（默认值6vp），不支持百分百比

selectitemWidt:选中的导航栏圆点的宽（默认值12），不支持百分百比

selectitemHeight:选中的导航栏圆点的高（默认值12），不支持百分百比

selectColor:选中的导航栏的颜色

Corlor：未选中的导航栏的颜色

例如：

Swiper() {
   // 略
}
.width('100%')
.height(160)
.indicator(
  Indicator.dot() // 圆点
    .selectedColor(Color.White) // 选中颜色
    .selectedItemWidth(30) // 选中宽度
    .selectedItemHeight(4) // 选中高度
    .itemWidth(10) // 默认宽度
    .itemHeight(4) // 默认宽度
)

详情见开发文档：创建轮播 (Swiper)-构建布局-开发布局-UI开发 (ArkTS声明式开发范式)-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)

控制器进行页面切换

步骤：

1：创建控制器

2：轮播图绑定控制器

3： 点击事件调用控制器方法

核心

SwiperController对象核心方法

showNext()：切换至下一页

showPrevious()：切换至上一页

@Entry
@Component
struct SwiperDemo {
// 1.创建控制器对象
controller: SwiperController = new SwiperController()

build() {
  Column({ space: 10 }) {
    // 2. 设置给 Swiper
    Swiper(this.controller) {
      // 略
    }
    Row() {
      Button('上一页')
        .onClick(() => {
          // 3.调用控制器的方式实现切换效果
          this.controller.showPrevious()
        })
      Button('下一页')
        .onClick(() => {
          this.controller.showNext()
        })
    }

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

  // .padding(20)
}
}