devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

鸿蒙HarmonyOS实战-ArkUI组件（Swiper）_鸿蒙 swiper

作者：不正经 | 2024-03-19 12:44:15

赞

踩

鸿蒙 swiper

 一、Swiper

1.概述

Swiper可以实现手机、平板等移动端设备上的图片轮播效果，支持无缝轮播、自动播放、响应式布局等功能。Swiper轮播图具有使用简单、样式可定制、功能丰富、兼容性好等优点，是很多网站和移动应用中常用的轮播图插件。

2.布局与约束

Swiper是一个容器组件，如果自身尺寸没有被设置，它会根据子组件大小自动调整自身尺寸。如果开发者给Swiper设置了固定尺寸，那么在轮播过程中，Swiper的尺寸将一直保持设置的固定尺寸。如果未设置固定尺寸，Swiper会根据子组件大小自动调整自身尺寸。

3.循环播放

  1. @Entry
  2. @Component
  3. struct Index {
  4.   private swiperController: SwiperController = new SwiperController()
  5.   build() {
  6.     Swiper(this.swiperController) {
  7.       Text("0")
  8.         .width('100%')
  9.         .height('100%')
  10.         .backgroundColor(Color.Gray)
  11.         .textAlign(TextAlign.Center)
  12.         .fontSize(30)
  13.  
  14.       Text("1")
  15.         .width('100%')
  16.         .height('100%')
  17.         .backgroundColor(Color.Green)
  18.         .textAlign(TextAlign.Center)
  19.         .fontSize(30)
  20.  
  21.       Text("2")
  22.         .width('100%')
  23.         .height('100%')
  24.         .backgroundColor(Color.Blue)
  25.         .textAlign(TextAlign.Center)
  26.         .fontSize(30)
  27.     }
  28.     .loop(true)
  29.   }
  30. }

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

4.自动轮播

  1.  
  2. @Entry
  3. @Component
  4. struct Index {
  5.   private swiperController: SwiperController = new SwiperController()
  6.   build() {
  7.     Swiper(this.swiperController) {
  8.       Text("0")
  9.         .width('100%')
  10.         .height('100%')
  11.         .backgroundColor(Color.Gray)
  12.         .textAlign(TextAlign.Center)
  13.         .fontSize(30)
  14.  
  15.       Text("1")
  16.         .width('100%')
  17.         .height('100%')
  18.         .backgroundColor(Color.Green)
  19.         .textAlign(TextAlign.Center)
  20.         .fontSize(30)
  21.  
  22.       Text("2")
  23.         .width('100%')
  24.         .height('100%')
  25.         .backgroundColor(Color.Pink)
  26.         .textAlign(TextAlign.Center)
  27.         .fontSize(30)
  28.     }
  29.     .loop(true)
  30.     .autoPlay(true)
  31.     .interval(2000)
  32.   }
  33. }

在这里插入图片描述
autoPlay为true时，会自动切换播放子组件，子组件与子组件之间的播放间隔通过interval属性设置。interval属性默认值为2000，单位毫秒。

5.导航点样式

  1.  
  2. @Entry
  3. @Component
  4. struct Index {
  5.   private swiperController: SwiperController = new SwiperController()
  6.   build() {
  7.     Swiper(this.swiperController) {
  8.       Text("0")
  9.         .width('100%')
  10.         .height('100%')
  11.         .backgroundColor(Color.Gray)
  12.         .textAlign(TextAlign.Center)
  13.         .fontSize(30)
  14.  
  15.       Text("1")
  16.         .width('100%')
  17.         .height('100%')
  18.         .backgroundColor(Color.Green)
  19.         .textAlign(TextAlign.Center)
  20.         .fontSize(30)
  21.  
  22.       Text("2")
  23.         .width('100%')
  24.         .height('100%')
  25.         .backgroundColor(Color.Pink)
  26.         .textAlign(TextAlign.Center)
  27.         .fontSize(30)
  28.     }
  29.     .indicatorStyle({
  30.       size: 30,
  31.       left: 0,
  32.       color: Color.Red
  33.     })
  34.   }
  35. }

在这里插入图片描述

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

6.页面切换方式

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

  1.  
  2. @Entry
  3. @Component
  4. struct Index {
  5.   private swiperController: SwiperController = new SwiperController();
  6.  
  7.   build() {
  8.     Column({ space: 5 }) {
  9.       Swiper(this.swiperController) {
  10.         Text("0")
  11.           .width(250)
  12.           .height(250)
  13.           .backgroundColor(Color.Gray)
  14.           .textAlign(TextAlign.Center)
  15.           .fontSize(30)
  16.         Text("1")
  17.           .width(250)
  18.           .height(250)
  19.           .backgroundColor(Color.Green)
  20.           .textAlign(TextAlign.Center)
  21.           .fontSize(30)
  22.         Text("2")
  23.           .width(250)
  24.           .height(250)
  25.           .backgroundColor(Color.Pink)
  26.           .textAlign(TextAlign.Center)
  27.           .fontSize(30)
  28.       }
  29.       .indicator(true)
  30.  
  31.       Row({ space: 12 }) {
  32.         Button('下一页')
  33.           .onClick(() => {
  34.             this.swiperController.showNext(); // 通过controller切换到后一页
  35.           })
  36.         Button('上一页')
  37.           .onClick(() => {
  38.             this.swiperController.showPrevious(); // 通过controller切换到前一页
  39.           })
  40.       }.margin(5)
  41.     }.width('100%')
  42.     .margin({ top: 5 })
  43.   }
  44. }

在这里插入图片描述

7.轮播方向

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

  1.  
  2. @Entry
  3. @Component
  4. struct Index {
  5.   private swiperController: SwiperController = new SwiperController();
  6.  
  7.   build() {
  8.     Column({ space: 5 }) {
  9.       Swiper(this.swiperController) {
  10.         Text("0")
  11.           .width(250)
  12.           .height(250)
  13.           .backgroundColor(Color.Gray)
  14.           .textAlign(TextAlign.Center)
  15.           .fontSize(30)
  16.         Text("1")
  17.           .width(250)
  18.           .height(250)
  19.           .backgroundColor(Color.Green)
  20.           .textAlign(TextAlign.Center)
  21.           .fontSize(30)
  22.         Text("2")
  23.           .width(250)
  24.           .height(250)
  25.           .backgroundColor(Color.Pink)
  26.           .textAlign(TextAlign.Center)
  27.           .fontSize(30)
  28.       }
  29.       .indicator(true).vertical(false)
  30.  
  31.       Swiper(this.swiperController) {
  32.         Text("0")
  33.           .width(250)
  34.           .height(250)
  35.           .backgroundColor(Color.Gray)
  36.           .textAlign(TextAlign.Center)
  37.           .fontSize(30)
  38.         Text("1")
  39.           .width(250)
  40.           .height(250)
  41.           .backgroundColor(Color.Green)
  42.           .textAlign(TextAlign.Center)
  43.           .fontSize(30)
  44.         Text("2")
  45.           .width(250)
  46.           .height(250)
  47.           .backgroundColor(Color.Pink)
  48.           .textAlign(TextAlign.Center)
  49.           .fontSize(30)
  50.       }
  51.       .indicator(true).vertical(true)
  52.     }
  53.   }
  54. }

在这里插入图片描述

8.每页显示多个子页面

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

  1.  
  2. @Entry
  3. @Component
  4. struct Index {
  5.   private swiperController: SwiperController = new SwiperController();
  6.  
  7.   build() {
  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.       Text("3")
  28.         .width(250)
  29.         .height(250)
  30.         .backgroundColor(Color.Blue)
  31.         .textAlign(TextAlign.Center)
  32.         .fontSize(30)
  33.     }
  34.     .indicator(true)
  35.     .displayCount(2)
  36.   }
  37. }

在这里插入图片描述

 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/267758

推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。