HarmonyOS ArkUI滚动类组件-Swiper

最新推荐文章于 2025-06-18 17:12:32 发布

码中之牛

最新推荐文章于 2025-06-18 17:12:32 发布

阅读量828

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Harmony OS 移动开发 OpenHarmony 文章标签： harmonyos OpenHarmony 移动开发鸿蒙开发 ArkUI

本文链接：https://blog.csdn.net/weixin_61845324/article/details/138084272

移动开发同时被 3 个专栏收录

431 篇文章

订阅专栏

Harmony OS

312 篇文章

订阅专栏

OpenHarmony

212 篇文章

订阅专栏

Swiper 是页面切换类容器组件，它提供了切换页面显示的能力， Swiper 包含的每一个子组件就表示一个页面，例如 Swiper 有 4 个子组件，那么 Swiper 就有 4 个页面。 Swiper 可以绑定一个 SwiperController 控制显示上一页或者下一页。

Swiper定义介绍

interface SwiperInterface {
  (controller?: SwiperController): SwiperAttribute;
}

controller：给 Swiper 绑定一个控制器，控制页面翻页。

简单样例如下：

Swiper() {
  Text('Page1')
    .fontSize(20)
    .backgroundColor('#aabbcc')
  Text('Page2')
    .fontSize(20)
    .backgroundColor('#aabbcc')
  Text('Page3')
    .fontSize(20)
    .backgroundColor('#aabbcc')
}
.width('90%')
.height(120)
.backgroundColor(Color.Pink)

Swiper属性介绍

declare class SwiperAttribute<T> extends CommonMethod<T> {
  index(value: number): T;
  autoPlay(value: boolean): T;
  interval(value: number): T;
  indicator(value: boolean): T;
  loop(value: boolean): T;
  duration(value: number): T;
  vertical(value: boolean): T;
  itemSpace(value: number | string): T;
  displayMode(value: SwiperDisplayMode): T;
  onChange(event: (index: number) => void): T;
}

index：默认显示显示第几页，默认值为 0。
autoPlay：是否自动播放，默认值为 false ，当设置为自动播放时，导航点无法点击。
interval：设置自动播放时，播放的时间间隔，单位毫秒，默认是 3000。
indicator：是否显示导航点指示器，默认显示。
loop：是否开启循环显示，也就是说当翻页到最后一页再往下翻页是否会回到第一页，默认开启。
duration：页面切换的动画时长，单位为毫秒，默认是 400。
vertical：是否竖直翻页，默认是 false。

简单样例如下所示：

Swiper() {
  Text('Page1')
    .fontSize(20)
    .backgroundColor('#aabbcc')
  Text('Page2')
    .fontSize(20)
    .backgroundColor('#aabbcc')
  Text('Page3')
    .fontSize(20)
    .backgroundColor('#aabbcc')
}
.width('90%')
.height(120)
.backgroundColor(Color.Pink)
.index(1)                     // 设置默认显示第二页
.indicator(true)              // 设置显示导航指示器
.vertical(true)               // 设置竖直翻页
.loop(false)                  // 设置关闭循环翻页，当显示最后一页后首页时无法继续往下翻页

Swiper事件介绍

declare class SwiperAttribute<T> extends CommonMethod<T> {
  onChange(event: (index: number) => void): T;
}

onChange：页面切换时回到当前方法，显示当前第几页。

SwiperController简介

SwiperController 是 Swiper 的页面切换控制器，可以将此对象绑定至 Swiper 组件上，然后通过它控制翻页， SwiperController 定义如下：

export declare class SwiperController {
  showNext();
  showPrevious();
}

showNext：显示下一页。
showPrevious：显示上一页。

简单样例如下所示：

@Entry @Component struct ComponentTest {

  private controller: SwiperController = new SwiperController();

  build() {
    Column() {
      Swiper(this.controller) {      // 绑定翻页控制器
        Text('Page1')
          .fontSize(20)
          .backgroundColor('#aabbcc')
        Text('Page2')
          .fontSize(20)
          .backgroundColor('#aabbcc')
        Text('Page3')
          .fontSize(20)
          .backgroundColor('#aabbcc')
      }
      .width('90%')
      .height(120)
      .backgroundColor(Color.Pink)
      .index(1)                      // 默认显示第二页
      .indicator(true)               // 显示导航指示器

      Row({space: 20}) {
        Button('上一页')
          .onClick(() => {
            this.controller.showPrevious();
          })
        Button('下一页')
          .onClick(() => {
            this.controller.showNext();
          })
      }
      .margin({top: 10})
    }
    .alignItems(HorizontalAlign.Center)
    .width('100%')
    .height('100%')
    .padding({ left: 20, right: 20, top: 10 })
  }
}

码牛课堂也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线。大家可以进行参考学习：https://qr21.cn/FV7h05

①全方位，更合理的学习路径：
路线图包括ArkTS基础语法、鸿蒙应用APP开发、鸿蒙能力集APP开发、次开发多端部署开发、物联网开发等九大模块，六大实战项目贯穿始终，由浅入深，层层递进，深入理解鸿蒙开发原理！

②多层次，更多的鸿蒙原生应用：
路线图将包含完全基于鸿蒙内核开发的应用，比如一次开发多端部署、自由流转、元服务、端云一体化等，多方位的学习内容让学生能够高效掌握鸿蒙开发，少走弯路，真正理解并应用鸿蒙的核心技术和理念。

③实战化，更贴合企业需求的技术点：
学习路线图中的每一个技术点都能够紧贴企业需求，经过多次真实实践，每一个知识点、每一个项目，都是码牛课堂鸿蒙研发团队精心打磨和深度解析的成果，注重对学生的细致教学，每一步都确保学生能够真正理解和掌握。

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05