HarmonyOS Swiper：打造炫酷轮播效果，你也可以！

目录

一、轮播效果：HarmonyOS 开发的点睛之笔

二、Swiper 组件基础介绍

（一）Swiper 组件是什么

（二）基本使用方法

三、Swiper 组件属性详解

（一）布局与约束属性

（二）循环播放属性（loop）

（三）自动轮播属性（autoPlay 和 interval）

（四）导航点样式属性（indicator）

（五）导航点箭头样式属性（displayArrow）

（六）页面切换方式相关属性

（七）轮播方向属性（vertical）

（八）每页显示多个子页面属性（displayCount）

四、自定义切换动画

（一）customContentTransition 属性

（二）代码示例与效果展示

五、实际应用案例

（一）卡片自动轮播案例

（二）搜索栏上字体轮播案例

六、总结与展望

---

一、轮播效果：HarmonyOS 开发的点睛之笔

在 HarmonyOS 应用开发的广袤天地里，轮播图就像是一扇展示丰富内容的灵动之窗，以其独特的魅力和实用价值，成为众多应用不可或缺的一部分。它不仅是吸引用户目光的视觉焦点，更是提升用户体验、高效传递信息的得力助手。

想象一下，当你打开一款购物应用，首页那精美的商品轮播图，像一场绚丽的视觉盛宴，将热门商品、促销活动等关键信息以动态、醒目的方式呈现出来，瞬间点燃你的购物欲望；再比如新闻类应用，轮播图上滚动展示着最新的时事热点，让你在第一时间捕捉到世界的动态。从提升用户体验的角度来看，轮播图打破了静态页面的单调，赋予界面鲜活的生命力和流畅的交互感。用户只需轻轻滑动手指，就能轻松切换内容，探索更多精彩，这种便捷又有趣的操作方式，极大地增强了用户与应用之间的互动，让用户沉浸其中，流连忘返。

而在 HarmonyOS 应用开发中，实现如此迷人的轮播效果，Swiper 组件堪称不二之选。它就像是一位技艺精湛的舞台导演，凭借强大而丰富的功能，为开发者打造出各式各样美轮美奂、交互流畅的轮播效果。无论是简洁大气的图文轮播，还是充满创意的多媒体展示，Swiper 组件都能轻松驾驭，将开发者的奇思妙想完美呈现在用户眼前。接下来，就让我们一同深入 Swiper 组件的奇妙世界，揭开它神秘的面纱，探寻构建惊艳轮播效果的秘诀 。

二、Swiper 组件基础介绍

（一）Swiper 组件是什么

Swiper 是 HarmonyOS 应用开发中用于创建轮播效果的强大组件，从 API Version 7 开始支持。它就像是一个灵活的舞台，作为容器组件，当设置了多个子组件后，便可以对这些子组件进行轮播显示 ，能轻松实现内容的自动轮播展示，支持水平和垂直滚动、自动播放、循环播放等特性，为用户带来流畅且富有交互性的体验。无论是展示广告图片、产品介绍，还是新闻资讯等内容，Swiper 组件都能完美胜任，在应用首页或其他关键页面中发挥重要作用，极大地提升了应用的视觉吸引力和用户体验 。例如在电商应用的首页，Swiper 组件可以用来展示热门商品的轮播图，吸引用户的注意力；在新闻类应用中，它可以展示最新的头条新闻，让用户快速获取重要信息。

（二）基本使用方法

以下是一个基础 Swiper 轮播的代码示例，创建了一个包含三个页面的 Swiper 轮播图，每个页面都是一个简单的文本视图，背景颜色不同，借此直观呈现 Swiper 组件的基础用法。

@Entry

@Component

struct Index {

build() {

Column() {

Swiper() {

Text('首页轮播1').backgroundColor(Color.Red)

Text('首页轮播2').backgroundColor(Color.Blue)

Text('首页轮播3').backgroundColor(Color.Green)

}

.width('100%')

.height(200)

}

}

}

在上述代码中：

• Swiper() 创建了一个 Swiper 组件实例。

• 在 Swiper 的花括号内，定义了三个 Text 子组件，它们将作为轮播的页面。每个 Text 组件设置了不同的文本内容和背景颜色，以便区分不同页面。

• width('100%') 和 height(200) 分别设置了 Swiper 组件的宽度为父容器的 100%，高度为 200vp ，使其在页面中占据合适的空间并展示出轮播效果。运行这段代码，就能在应用界面中看到一个简单的水平方向轮播图，用户可以通过左右滑动来切换不同的文本页面 。

三、Swiper 组件属性详解

（一）布局与约束属性

Swiper 作为一个容器组件，其尺寸的设置有着多种情况。当设置了自身尺寸属性，例如 width 和 height，在轮播显示过程中，Swiper 就会以设置的尺寸生效 。假设我们设置 Swiper 的宽度为 300vp，高度为 200vp，那么无论子组件的大小如何，Swiper 都会保持这个固定尺寸来展示轮播内容。

而如果 Swiper 的自身尺寸属性未被设置，又会分两种情况。若设置了 prevMargin（前一个子组件与 Swiper 边缘的间距）或者 nextMargin（后一个子组件与 Swiper 边缘的间距）属性，Swiper 自身尺寸便会跟随其父组件 。比如在一个父容器 Column 中，Swiper 设置了 prevMargin 为 10vp，那么 Swiper 的宽度和高度就会根据 Column 的大小进行适配。若未设置 prevMargin 或者 nextMargin 属性，Swiper 则会自动根据子组件的大小设置自身的尺寸。当子组件是不同大小的图片时，Swiper 会自动调整自身尺寸以完整显示这些图片 。

（二）循环播放属性（loop）

loop 属性用于控制 Swiper 是否循环播放，它的默认值为 true。当 loop 为 true 时，轮播图就像是一个没有尽头的循环轨道，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页 。以一个包含 5 张子图片的轮播图为例，当显示到第 5 张图片时，继续往后切换，会无缝过渡到第 1 张图片，反之亦然，给用户带来流畅的连续浏览体验。如果 loop 为 false，轮播图就变成了一个有限的序列，在第一页时，无法继续向前切换；在最后一页时，也无法继续向后切换，这种设置适用于一些特定场景，比如展示固定顺序且不需要循环的内容 。

（三）自动轮播属性（autoPlay 和 interval）

autoPlay 属性用于控制 Swiper 是否自动轮播子组件，默认值为 false。当 autoPlay 设置为 true 时，Swiper 就像一个不知疲倦的自动放映机，会自动切换播放子组件 。interval 属性则用于设置子组件与子组件之间的播放间隔，默认值为 3000 毫秒，即 3 秒。通过调整 interval 的值，可以控制轮播的速度，比如将其设置为 5000 毫秒，轮播速度就会变慢，用户有更充足的时间浏览每个页面的内容；若设置为 1000 毫秒，轮播速度会加快，营造出更加动态的效果 。以下是设置自动轮播的代码示例：

Swiper() {

// 子组件内容

}

.autoPlay(true)

.interval(2000);

在这段代码中，autoPlay (true) 开启了自动轮