HarmonyOS 5.0.0 或以上：实现图片轮播滑动动画与自动播放切换

最新推荐文章于 2025-10-04 08:24:15 发布

原创

最新推荐文章于 2025-10-04 08:24:15 发布 · 403 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#华为 #harmonyos

一、功能简介

本篇将实现一个支持左右滑动 + 自动轮播的图片轮播组件，结合滑动切换动画与时间驱动切换，适用于首页 Banner、图文推荐、教程引导等视觉焦点区域。

二、关键技术点

能力	实现方式
图片横向滑动	`Scroll()` + `.scrollTo()`
自动播放切换	`setInterval` + 控制 `scrollIndex`
平滑动画	`.animate()` 切换过渡效果
圆点指示器	当前页高亮，增强导航性

三、页面结构

entry/src/main/ets/pages/ImageCarouselDemo.ets

四、ArkTS 实战代码（ImageCarouselDemo.ets）

@Entry
@Component
struct ImageCarouselDemo {
   
   
  @State currentIndex: number = 0
  private imageList: string[] = [
    $r('app.media.banner_1'),
    $r('app.media.banner_2'),
    $r('app.media.banner_3')
  ]
  private intervalId: number = 0
  private scrollRef: ScrollController = new ScrollController()

  aboutToAppear(</