HarmonyOS应用开发学习笔记 UI布局学习 创建轮播（Swiper） artTS 轮播组件 简单使用

官方文档

Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

1、简单用法

• loop 控制是否循环

...
private swiperController: SwiperController = new SwiperController()
...
Swiper(this.swiperController) {
  Text("0")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Gray)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("1")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Green)
    .textAlign(TextAlign.Center)
    .fontSize(30)

  Text("2")
    .width('90%')
    .height('100%')
    .backgroundColor(Color.Blue)
    .textAlign(TextAlign.Center)
    .fontSize(30)
}
.loop(true)

2、设置是否自动轮播

Swiper(this.swiperController) {
……
}
.loop(true)
.autoPlay(true) //自动轮播
.interval(1000)//轮播间隔

3、导航点样式

Swiper(this.swiperController) {
……
}
.indicatorStyle({
  size: 30,
  left: 0,
  color: Color.Red
})

4、页面切换方式

• this.swiperController.showNext(); // 通过controller切换到后一页
• this.swiperController.showNext(); // 通过controller切换到后一页

5、轮播方向

• 当vertical为true时，表示在垂直方向上进行轮播；为false时，表示在水平方向上进行轮播。vertical默认值为false。

Swiper(this.swiperController) {
  ...
}
.indicator(true)
.vertical(false)

6、每页显示多个子页面

Swiper(this.swiperController) {
  ...
}
.indicator(true)
.displayCount(2)