codecamp

创建轮播（Swiper）

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

布局与约束

Swiper作为一个容器组件，在自身尺寸属性未被设置时，会自动根据子组件的大小设置自身的尺寸。如果开发者对Swiper组件设置了固定的尺寸，则在轮播显示过程中均以该尺寸生效；否则，在轮播过程中，会根据子组件的大小自动调整自身的尺寸。

循环播放

通过loop属性控制是否循环播放，该属性默认值为true。

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

loop为true：
  1. ...
  2. private swiperController: SwiperController = new SwiperController()
  3. ...
  4. Swiper(this.swiperController) {
  5.   Text("0")
  6.     .width('90%')
  7.     .height('100%')
  8.     .backgroundColor(Color.Gray)
  9.     .textAlign(TextAlign.Center)
  10.     .fontSize(30)
  11. 

  12.   Text("1")
  13.     .width('90%')
  14.     .height('100%')
  15.     .backgroundColor(Color.Green)
  16.     .textAlign(TextAlign.Center)
  17.     .fontSize(30)
  18. 

  19.   Text("2")
  20.     .width('90%')
  21.     .height('100%')
  22.     .backgroundColor(Color.Blue)
  23.     .textAlign(TextAlign.Center)
  24.     .fontSize(30)
  25. }
  26. .loop(true)

loop为false：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Blue)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }
  23. .loop(false)

自动轮播

Swiper通过设置autoPlay属性，控制是否自动轮播子组件。该属性默认值为false。

autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为3000，单位毫秒。

autoPlay为true：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Pink)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }
  23. .loop(true)
  24. .autoPlay(true)
  25. .interval(1000)

导航点样式

Swiper提供了默认的导航点样式，导航点默认显示在Swiper下方居中位置，开发者也可以通过indicatorStyle属性自定义导航点的位置和样式。

通过indicatorStyle属性，开发者可以设置导航点相对于Swiper组件上下左右四个方位的位置，同时也可以设置每个导航点的尺寸、颜色、蒙层和被选中导航点的颜色。

导航点使用默认样式：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Pink)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }

自定义导航点样式（示例：导航点直径设为30VP，左边距为0，导航点颜色设为红色）：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width('90%')
  4.     .height('100%')
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8. 

  9.   Text("1")
  10.     .width('90%')
  11.     .height('100%')
  12.     .backgroundColor(Color.Green)
  13.     .textAlign(TextAlign.Center)
  14.     .fontSize(30)
  15. 

  16.   Text("2")
  17.     .width('90%')
  18.     .height('100%')
  19.     .backgroundColor(Color.Pink)
  20.     .textAlign(TextAlign.Center)
  21.     .fontSize(30)
  22. }
  23. .indicatorStyle({
  24.   size: 30,
  25.   left: 0,
  26.   color: Color.Red
  27. })

页面切换方式

Swiper支持三种页面切换方式：手指滑动、点击导航点和通过控制器。

通过控制器切换页面：
  1. @Entry
  2. @Component
  3. struct SwiperDemo {
  4.   private swiperController: SwiperController = new SwiperController();
  5. 

  6.   build() {
  7.     Column({ space: 5 }) {
  8.       Swiper(this.swiperController) {
  9.         Text("0")
  10.           .width(250)
  11.           .height(250)
  12.           .backgroundColor(Color.Gray)
  13.           .textAlign(TextAlign.Center)
  14.           .fontSize(30)
  15.         Text("1")
  16.           .width(250)
  17.           .height(250)
  18.           .backgroundColor(Color.Green)
  19.           .textAlign(TextAlign.Center)
  20.           .fontSize(30)
  21.         Text("2")
  22.           .width(250)
  23.           .height(250)
  24.           .backgroundColor(Color.Pink)
  25.           .textAlign(TextAlign.Center)
  26.           .fontSize(30)
  27.       }
  28.       .indicator(true)
  29. 

  30.       Row({ space: 12 }) {
  31.         Button('showNext')
  32.           .onClick(() => {
  33.             this.swiperController.showNext(); // 通过controller切换到后一页
  34.           })
  35.         Button('showPrevious')
  36.           .onClick(() => {
  37.             this.swiperController.showPrevious(); // 通过controller切换到前一页
  38.           })
  39.       }.margin(5)
  40.     }.width('100%')
  41.     .margin({ top: 5 })
  42.   }
  43. }

轮播方向

Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制。

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

设置水平方向上轮播：
  1. Swiper(this.swiperController) {
  2.   ...
  3. }
  4. .indicator(true)
  5. .vertical(false)

设置垂直方向轮播：
  1. Swiper(this.swiperController) {
  2.   ...
  3. }
  4. .indicator(true)
  5. .vertical(true)

每页显示多个子页面

Swiper支持在一个页面内同时显示多个子组件，通过displayCount属性设置。

设置一个页面内显示两个子组件：
  1. Swiper(this.swiperController) {
  2.   Text("0")
  3.     .width(250)
  4.     .height(250)
  5.     .backgroundColor(Color.Gray)
  6.     .textAlign(TextAlign.Center)
  7.     .fontSize(30)
  8.   Text("1")
  9.     .width(250)
  10.     .height(250)
  11.     .backgroundColor(Color.Green)
  12.     .textAlign(TextAlign.Center)
  13.     .fontSize(30)
  14.   Text("2")
  15.     .width(250)
  16.     .height(250)
  17.     .backgroundColor(Color.Pink)
  18.     .textAlign(TextAlign.Center)
  19.     .fontSize(30)
  20.   Text("3")
  21.     .width(250)
  22.     .height(250)
  23.     .backgroundColor(Color.Blue)
  24.     .textAlign(TextAlign.Center)
  25.     .fontSize(30)
  26. }
  27. .indicator(true)
  28. .displayCount(2)

创建网格（Grid/GridItem）
改善布局性能
温馨提示
下载编程狮App，免费阅读超1000+编程语言教程
取消
确定
目录
构建第一个ArkTS应用（Stage模型）
Stage模型应用程序包结构
多HAP构建视图
多HAP的开发调试与发布部署流程
多HAP使用规则
多HAP运行机制及数据通信方式
应用程序包安装和卸载流程
应用程序包更新流程
共享包概述
HAR
应用内HSP开发指导
快速修复概述
快速修复命令行调试开发指导
应用配置文件概述（Stage模型）
app.json5配置文件
module.json5配置文件
资源分类与访问

学习ArkTS语言

开发

UI开发

Web

基础类库

通知

媒体

关闭

 MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }