Swiper

1. 基本用法

首先来看看如何设置轮播内容，以及设置尺寸

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

​ a. 设置 Swiper 的尺寸：内容会拉伸为和 Swiper 一致（优先级高）

​ b. 没有设置Swiper的尺寸，Swiper被子组件的尺寸撑开

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

2. 常用属性方法

参数名	参数类型	参数描述
autoPlay	boolean	子组件是否自动播放。默认值：false说明：loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。
interval	number	使用自动播放时播放的时间间隔，单位为毫秒。默认值：3000
vertical	boolean	是否为纵向滑动。默认值：false
loop👎	boolean	是否开启无限循环播放。设置为true时表示无限循环播放，设置为false时表示只播放一次。默认值：true

@Entry
@Component
struct Index {
  build() {
    Swiper() {
      Text('0')
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .fontSize(30)
      Text('1')
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Green)
        .fontColor(Color.White)
        .fontSize(30)
    }
    .width('100%')
    .height(160)
    .loop(false) // 是否开启循环 true/false
    .autoPlay(true) // 是否自动播放 true/false
    .interval(4000) // 自动播放时间间隔 单位毫秒 默认3000
    .vertical(true) // 是否纵向滑动
  }
}

3. 调整导航点

Swiper(){
  // 略
}
.indicator(false) // 关闭导航
.indicator(Indicator.dot()) // 圆点指示器（默认）
.indicator(Indicator.digit()) // 数字指示器

位置属性：

参数名	参数类型	参数描述
left	Length	设置导航点距离Swiper组件左边的距离。默认值：0单位：vp
top	Length	设置导航点距离Swiper组件顶部的距离。默认值：0单位：vp
right	Length	设置导航点距离Swiper组件右边的距离。默认值：0单位：vp
bottom	Length	设置导航点距离Swiper组件底部的距离。默认值：0单位：vp

样式属性：

参数名	参数类型	参数描述
itemWidth	Length	设置Swiper组件圆点导航指示器的宽，不支持设置百分比。默认值：6单位：vp
itemHeightLength	Length	设置Swiper组件圆点导航指示器的高，不支持设置百分比。默认值：6单位：vp
selectedItemWidth	Length	设置选中Swiper组件圆点导航指示器的宽，不支持设置百分比。默认值：12单位：vp
selectedItemHeight	Length	设置选中Swiper组件圆点导航指示器的高，不支持设置百分比。默认值：6单位：vp
color	ResourceColor	设置Swiper组件圆点导航指示器的颜色。默认值：’#182431’（10%透明度）
selectedColor	ResourceColor	设置选中Swiper组件圆点导航指示器的颜色。默认值：’#007DFF’

@Entry
@Component
struct Index {
  build() {
    Swiper() {
      Text('0')
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .fontColor(Color.White)
        .fontSize(30)
      Text('1')
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Green)
        .fontColor(Color.White)
        .fontSize(30)
      Text('2')
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Blue)
        .fontColor(Color.White)
        .fontSize(30)
    }
    .width('100%')
    .height(160)
    // .indicator(false) // 关闭导航点
    // .indicator(Indicator.digit()) // 数字导航点
    .indicator(
      Indicator.dot()
        .left(10)// 左侧距离
        .top(10)// 顶部距离
        .bottom(10)// 底部距离
        .right(10)// 右侧距离（距离属性组合使用，无需全部设置）
        .itemWidth(20)// 指示器宽度
        .itemHeight(20)// 指示器高度
        .selectedItemWidth(30)// 选中指示器宽度
        .selectedItemHeight(30)// 选中指示器高度
        .selectedColor(Color.Yellow)// 选中指示器颜色
        .color(Color.Blue) // 默认指示器宽度
    ) // 圆形导航点
  }
}