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)
相关推荐
_落纸29 分钟前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
猫林老师1 小时前
HarmonyOS数据持久化:Preferences轻量级存储实战
华为·harmonyos
Alice-YUE1 小时前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha1 小时前
SpringBoot
笔记·学习
萘柰奈1 小时前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 小时前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 小时前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 小时前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿2 小时前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng3 小时前
量子计算学习(第十四周周报)
学习·量子计算