HarmonyOS ArkTS 实战轮播图

HarmonyOS ArkTS 实战：可手动控制的 Swiper 轮播图

一、项目需求

在鸿蒙 ArkUI 开发中，轮播图是非常常用的组件。本次案例需要实现可手动控制的轮播效果：

1. 点击按钮，开启或关闭轮播自动播放；
2. 点击按钮，切换循环播放与非循环播放模式。 通过状态变量绑定 Swiper 组件属性，实现按钮操作与轮播行为实时联动。

二、核心知识点

1. Swiper 组件关键属性

• autoPlay：布尔类型，控制是否开启自动轮播；
• loop：布尔类型，控制是否开启首尾循环滑动；
• interval：设置轮播切换间隔，单位为毫秒。

响应式状态 使用@State装饰器定义变量，变量值修改后页面自动刷新 UI，完成视图同步更新。

按钮点击事件 通过 onClick 事件对布尔状态值进行取反，实现开关切换。

1. 完整代码

四、运行效果

1. 初始状态：自动播放关闭、非循环播放，轮播静止不动。
2. 点击第一个按钮：文字变为 “自动播放开启”，轮播每 2 秒自动切换图片。
3. 点击第二个按钮：文字切换为 “循环播放”，轮播到最后一张后会回到第一张无限循环。