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)
相关推荐
lingggggaaaa5 分钟前
小迪安全v2023学习笔记(一百三十四讲)—— Windows权限提升篇&数据库篇&MySQL&MSSQL&Oracle&自动化项目
java·数据库·windows·笔记·学习·安全·网络安全
安卓开发者40 分钟前
鸿蒙NEXT应用接入快捷栏:一键直达,提升用户体验
java·harmonyos·ux
HMS Core40 分钟前
消息推送策略:如何在营销与用户体验间找到最佳平衡点
华为·harmonyos·ux
StarPrayers.1 小时前
损失函数(Loss Function)、反向传播(Backward Propagation)和优化器(Optimizer)学习笔记
人工智能·笔记·深度学习·学习
Brianna Home1 小时前
【案例实战】鸿蒙分布式调度:跨设备协同实战
华为·wpf·harmonyos
Bert丶seven1 小时前
鸿蒙Harmony实战开发教学(No.4)-RichText组件基础到高阶介绍篇
华为·harmonyos·arkts·鸿蒙·鸿蒙系统·arkui·开发教程
鸿蒙小白龙2 小时前
openharmony之分布式蓝牙实现多功能场景设备协同实战
分布式·harmonyos·鸿蒙·鸿蒙系统·open harmony
明月5663 小时前
github开源笔记应用程序项目推荐-Joplin
笔记·开源·joplin·跨平台笔记应用
爱吃水蜜桃的奥特曼3 小时前
玩Android Harmony next版,通过项目了解harmony项目快速搭建开发
android·harmonyos
YuCaiH3 小时前
网络编程的基础知识
linux·笔记·嵌入式·网络通信