Harmony组件化开发

Swiper轮播组件

容器组件，当设置了多个子组件后，可以对这些 子组件 进行轮播显示。（文字、图片…）

Swiper基本用法

语法:(设置内容+尺寸)

1
2
3
4
5
6
7
8
9
Swiper() {
    // 1. 轮播内容 
    Image($r('...'))
    Image($r('...'))
    Image($r('...'))
}
// 2.设置尺寸（内容会自动拉伸）
.width('100%')
.height(100)

Swiper常见属性

属性方法 传值 作用 默认值
loop boolean 是否开启循环 true
autoPlay boolean 是否自动播放 false
interval number 自动播放的时间间隔（ms） 3000
vertical boolean 纵向滑动轮播 false

Swiper样式自定义

1
2
3
4
5
6
7
8
9
10
11
12
Swiper() {
 ...
 }
 .indicator(
     Indicator.dot() // 小圆点
        .itemWidth(20) // 默认的宽
        .itemHeight(20) // 默认的高
        .color(Color.Black) // 默认的颜色
        .selectedItemWidth(30) // 选中的宽
        .selectedItemHeight(30) // 选中的高
        .selectedColor(Color.White) // 选中的颜色
)