Swiper组件的基本使用

介绍

滑块视图容器，提供子组件滑动轮播显示的能力。

使用场景

当想要构建轮播图时，可以使用此组件，多用于电商展示商品或者网站展示海报

基本用法

Swiper() {
  // 放置想要轮播的内容 
  // swiper是容器组件，可以放置想要放置的任意子组件
  // 也可以给子组件设置尺寸以撑开swiper组件
}
// 设置swiper组件的尺寸，子组件会自动适应拉伸至相同尺寸
.width('100%')
.height(100)

接口信息

参数

参数名	参数类型	必填	参数描述
controller	SwiperController	否	给组件绑定一个控制器，用来控制组件翻页。

常用属性

autoPlay

autoPlay(value: boolean)

设置子组件是否自动播放。

loop为false时，自动轮播到最后一页时停止轮播。手势切换后不是最后一页时继续播放。

参数：

参数名	类型	必填	说明
value	boolean	是	子组件是否自动播放。 默认值：false

interval

interval(value: number)

设置使用自动播放时播放的时间间隔。

参数：

参数名	类型	必填	说明
value	number	是	自动播放时播放的时间间隔。 默认值：3000 单位：毫秒

indicator

indicator(value: DotIndicator | DigitIndicator | boolean)

设置可选导航点指示器样式。

参数：

参数名	类型	必填	说明
value	DotIndicator10+ | DigitIndicator10+ | boolean	是	可选导航点指示器样式。 - DotIndicator：圆点指示器样式。 - DigitIndicator：数字指示器样式。 - boolean：是否启用导航点指示器。设置为true启用，false不启用。 默认值：true 默认类型：DotIndicator

Indicator10+对象说明

设置导航点距离Swiper组件距离。

属性

参数名	参数类型	必填项	参数描述
left	Length	是	设置导航点距离Swiper组件左边的距离。 默认值：0 单位：vp
top	Length	是	设置导航点距离Swiper组件顶部的距离。 默认值：0 单位：vp
right	Length	是	设置导航点距离Swiper组件右边的距离。 默认值：0 单位：vp
bottom	Length	是	设置导航点距离Swiper组件底部的距离。 默认值：0 单位：vp
start12+	LengthMetrics	是	在RTL模式下为导航点距离Swiper组件右边的距离，在LTR模式下为导航点距离Swiper组件左边的距离 默认值：0 单位：vp 元服务API： 从API version 12开始，该接口支持在元服务中使用。
end12+	LengthMetrics	是	在RTL模式下为导航点距离Swiper组件左边的距离，在LTR模式下为导航点距离Swiper组件右边的距离。 默认值：0 单位：vp 元服务API： 从API version 12开始，该接口支持在元服务中使用。

dot

static dot()

返回一个DotIndicator对象。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

digit

static digit()

返回一个DigitIndicator对象。

DotIndicator10+对象说明

圆点指示器属性及功能继承自Indicator。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数名	参数类型	必填项	参数描述
itemWidth	Length	是	设置Swiper组件圆点导航指示器的宽，不支持设置百分比。 默认值：6 单位：vp
itemHeight	Length	是	设置Swiper组件圆点导航指示器的高，不支持设置百分比。 默认值：6 单位：vp
selectedItemWidth	Length	是	设置选中Swiper组件圆点导航指示器的宽，不支持设置百分比。 默认值：12 单位：vp
selectedItemHeight	Length	是	设置选中Swiper组件圆点导航指示器的高，不支持设置百分比。 默认值：6 单位：vp
mask	boolean	是	设置是否显示Swiper组件圆点导航指示器的蒙版样式。 默认值：false
color	ResourceColor	是	设置Swiper组件圆点导航指示器的颜色。 默认值：'#182431'（10%透明度）
selectedColor	ResourceColor	是	设置选中Swiper组件圆点导航指示器的颜色。 默认值：'#007DFF'
maxDisplayCount12+	number	是	设置圆点导航点指示器样式下，导航点显示个数最大值，当实际导航点个数大于最大导航点个数时，会生效超长效果样式，样式如示例5所示。 默认值：这个属性没有默认值，如果设置异常值那等同于没有超长显示效果。 取值范围：6-9 说明： 1、超长显示场景，目前暂时不支持交互功能（包括：手指点击拖拽、鼠标操作等）。 2、在超长显示场景下，中间页面对应的选中导航点的位置，并不是完全固定的，取决于之前的翻页操作序列。 元服务API： 从API version 12开始，该接口支持在元服务中使用。

DigitIndicator10+对象说明

数字指示器属性及功能继承自Indicator。

参数名	参数类型	必填项	参数描述
fontColor	ResourceColor	是	设置Swiper组件数字导航点的字体颜色。 默认值：'#ff182431'
selectedFontColor	ResourceColor	是	设置选中Swiper组件数字导航点的字体颜色。 默认值：'#ff182431'
digitFont	{ size?:Length weight?:number | FontWeight | string }	是	设置Swiper组件数字导航点的字体样式： - size：数字导航点指示器的字体大小，不支持设置百分比。 默认值：14vp - weight：数字导航点指示器的字重。 默认值：FontWeight.Normal
selectedDigitFont	{ size?:Length weight?:number | FontWeight | string }	是	设置选中Swiper组件数字导航点的字体样式： - size：数字导航点选中指示器的字体大小，不支持设置百分比。 默认值：14vp - weight：数字导航点选中指示器的字重。 默认值：FontWeight.Normal

案例

参考代码：

@Entry  
@Component  
struct Index {  
  
  //创建数组存放图片地址  
  imgs: string[]=[  
    'app.media.swi_01',  
    'app.media.swi_02',  
    'app.media.swi_03',  
    'app.media.swi_04',  
    'app.media.swi_05',  
    'app.media.swi_06'  
  ]  
  
  build() {  
    Column() {  
      Swiper(){  
        //使用ForEach循环遍历组件  
        ForEach(this.imgs, (item: string)=>{  
          Image($r(item))  
        })  
  
      }  
        .width(323)  
        .height(410)  
        .autoPlay(true) //开启自动播放 
        //.loop()属性的默认值是循环播放，可以省略不写  
        .interval(1000) //设置使用自动播放时播放的时间间隔 默认值是3000毫秒  
        //设置可选导航点指示器样式。  
        .indicator(DotIndicator.dot() //圆点指示器的原点样式  
          .itemWidth(10) //普通原点宽度  
          .itemHeight(10) //普通原点高度  
          .selectedItemWidth(20) //被选中原点宽度  
          .selectedItemHeight(10) //被选中原点高度  
          .color(Color.Gray) //普通原点颜色  
          .selectedColor(Color.White) //被选中原点颜色  
        )  
  
    }  
    .height('100%')  
    .width('100%')  
    .backgroundColor(Color.Pink)  
  }  
}