HarmonyOS实战开发-ArkUI组件（Swiper）

蜀道衫QAQ2024-04-19 10:14

🚀一、Swiper

🔎1.概述

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

🔎2.布局与约束

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

🔎3.循环播放

scss 复制代码 
@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController()
  build() {
    Swiper(this.swiperController) {
      Text("0")
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontSize(30)

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

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

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

🔎4.自动轮播

scss 复制代码 
@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController()
  build() {
    Swiper(this.swiperController) {
      Text("0")
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontSize(30)

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

      Text("2")
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .fontSize(30)
    }
    .loop(true)
    .autoPlay(true)
    .interval(2000)
  }
}

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

🔎5.导航点样式

scss 复制代码 
@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController()
  build() {
    Swiper(this.swiperController) {
      Text("0")
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontSize(30)

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

      Text("2")
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .fontSize(30)
    }
    .indicatorStyle({
      size: 30,
      left: 0,
      color: Color.Red
    })
  }
}

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

🔎6.页面切换方式

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

scss 复制代码 
@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        Text("0")
          .width(250)
          .height(250)
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("1")
          .width(250)
          .height(250)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("2")
          .width(250)
          .height(250)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .indicator(true)

      Row({ space: 12 }) {
        Button('下一页')
          .onClick(() => {
            this.swiperController.showNext(); // 通过controller切换到后一页
          })
        Button('上一页')
          .onClick(() => {
            this.swiperController.showPrevious(); // 通过controller切换到前一页
          })
      }.margin(5)
    }.width('100%')
    .margin({ top: 5 })
  }
}

🔎7.轮播方向

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

scss 复制代码 
@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        Text("0")
          .width(250)
          .height(250)
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("1")
          .width(250)
          .height(250)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("2")
          .width(250)
          .height(250)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .indicator(true).vertical(false)

      Swiper(this.swiperController) {
        Text("0")
          .width(250)
          .height(250)
          .backgroundColor(Color.Gray)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("1")
          .width(250)
          .height(250)
          .backgroundColor(Color.Green)
          .textAlign(TextAlign.Center)
          .fontSize(30)
        Text("2")
          .width(250)
          .height(250)
          .backgroundColor(Color.Pink)
          .textAlign(TextAlign.Center)
          .fontSize(30)
      }
      .indicator(true).vertical(true)
    }
  }
}

🔎8.每页显示多个子页面

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

scss 复制代码 
@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController();

  build() {
    Swiper(this.swiperController) {
      Text("0")
        .width(250)
        .height(250)
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .fontSize(30)
      Text("1")
        .width(250)
        .height(250)
        .backgroundColor(Color.Green)
        .textAlign(TextAlign.Center)
        .fontSize(30)
      Text("2")
        .width(250)
        .height(250)
        .backgroundColor(Color.Pink)
        .textAlign(TextAlign.Center)
        .fontSize(30)
      Text("3")
        .width(250)
        .height(250)
        .backgroundColor(Color.Blue)
        .textAlign(TextAlign.Center)
        .fontSize(30)
    }
    .indicator(true)
    .displayCount(2)
  }
}

🚀写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
  • 更多鸿蒙最新技术知识点，请关注作者博客：t.doruo.cn/14DjR1rEY
相关推荐
帅得不敢出门1 小时前
Android Framework预装traceroute执行文件到system/bin下
android
xzkyd outpaper1 小时前
从面试角度回答Android中ContentProvider启动原理
android·面试·计算机八股
编程乐学1 小时前
基于Android 开发完成的购物商城App--前后端分离项目
android·android studio·springboot·前后端分离·大作业·购物商城
这个家伙很笨6 小时前
了解Android studio 初学者零基础推荐（4）
android·ide·android studio
Georgewu6 小时前
【HarmonyOS 5】鸿蒙CodeGenie AI辅助编程工具详解
华为·ai编程·harmonyos
前端世界7 小时前
解密鸿蒙系统的隐私护城河：从权限动态管控到生物数据加密的全链路防护
华为·harmonyos
alexhilton7 小时前
在Android应用中实战Repository模式
android·kotlin·android jetpack
二流小码农12 小时前
鸿蒙开发：DevEcoTesting中的稳定性测试
android·ios·harmonyos
一起搞IT吧12 小时前
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
android·图像处理·数码相机
热门推荐
01零代码入门 | Coze——让大模型接入自己的数据库02【图像处理与机器视觉】XJTU期末考点03KGG转MP3工具|非KGM文件|解密音频04Coze扣子平台完整体验和实践（附国内和国际版对比）05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】07DeepSeek各版本说明与优缺点分析08海康Visionmaster-常见问题排查方法-启动阶段09【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！1020分钟拿下字节Coze工作流搭建全部知识点，保姆级小白教学干货密集