HarmonyOS NEXT 实现 banner 轮播图案例

大家好，我是 V 哥。

在 HarmonyOS 的 ArkTS (Ark TypeScript) 中实现一个 Banner 轮播图，我们可以使用 Swiper 组件来实现轮播效果。Swiper 是 HarmonyOS 提供的基础组件之一，可以用于实现滑动轮播图等功能。接下来我会为你详细介绍如何使用 ArkTS 实现一个简单的 Banner 轮播图，并解释各个实现步骤。

步骤 1: 项目初始化

首先确保已经设置好 HarmonyOS 的开发环境，并且已经创建了一个新的 ArkTS 项目。如果还没有安装开发环境，可以通过 DevEco Studio 创建并配置。

步骤 2: 编写代码

我们将在 index.ets 中编写一个轮播图实现。

// index.ets
@Entry
@Component
struct BannerCarousel {
  private images: string[] = [
    'common/images/banner1.png',
    'common/images/banner2.png',
    'common/images/banner3.png',
  ]; // 轮播图的图片数组
  
  @State private currentIndex: number = 0; // 当前展示图片的索引
  
  build() {
    Column() {
      // 轮播图实现
      Swiper({ index: this.currentIndex, loop: true, autoplay: 3000 })
        .height('300px') // 设置高度
        .width('100%') // 宽度占满整个屏幕
        .onChange((index: number) => { 
          this.currentIndex = index; // 更新当前索引
        }) {
          // 遍历图片数组，生成每个轮播的页面
          ForEach(this.images, (imageSrc: string, index: number) => {
            Image(imageSrc)
              .width('100%')
              .height('100%')
              .objectFit(ImageFit.Cover); // 图片适配
          });
      }

      // 指示器：显示当前轮播的进度
      Row({ spaceBetween: 'center', alignment: 'center' }) {
        ForEach(this.images, (item: string, index: number) => {
          Circle()
            .radius(5)
            .backgroundColor(this.currentIndex === index ? Color.Blue : Color.Gray)
            .margin({ left: 5, right: 5 });
        });
      }
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

步骤 3: 实现过程详解

图片数据源：我们在 images 数组中存放了轮播图的图片路径。这个数组用于生成轮播图页面。
Swiper 组件：Swiper 组件是实现轮播图的核心部分。通过 Swiper({ index: this.currentIndex, loop: true, autoplay: 3000 }) 来创建一个自动播放且可以循环滚动的轮播图。
ForEach 循环：我们使用 ForEach 方法来遍历图片数组 this.images，为每张图片生成一个 Image 组件，并且设置了其大小为 100%，即占满父组件。同时使用 ImageFit.Cover 确保图片按照比例缩放并覆盖整个区域。
指示器 (小圆点)：在轮播图下方，我们使用了一个 Row 布局来放置指示器，指示器通过 Circle 组件实现。每个 Circle 的背景颜色根据当前 currentIndex 来改变，当前图片对应的小圆点为蓝色 (Color.Blue)，其余的小圆点为灰色 (Color.Gray)。
事件监听：onChange 方法会在轮播图滑动切换时触发，我们在这里更新 currentIndex，从而让指示器随之更新。

步骤 4: 运行效果

图片会自动在 3 秒后滚动到下一张。
用户可以手动滑动图片，currentIndex 变化后指示器也会随之更新。
轮播图是循环的，最后一张图片后会自动回到第一张。

关键点总结

Swiper 是实现轮播图的核心组件，提供了丰富的属性来控制轮播效果，如自动播放、循环滚动等。
ForEach 用于遍历图片数组，生成每一页的内容。
指示器（小圆点）可以通过 Row 和 Circle 实现，并结合 currentIndex 动态改变显示效果。

这个简单的实现可以作为更复杂 Banner 轮播图的基础，你可以根据需要进一步自定义组件的样式、添加更多功能（如点击跳转、懒加载等）。