HarmonyOS Next 之轮播图开发指南（Swiper组件）

很萌很帅的恶魔神ww2025-06-13 15:26

案例效果

实现一个支持自动播放、手动滑动、分页指示器的图片轮播组件

实现步骤

1. 创建基本布局结构

javascript 复制代码

// 示例代码
@Entry
@Component
struct SwiperExample {
  @State currentIndex: number = 0
  private swiperController: SwiperController = new SwiperController()

  // 轮播图数据源
  @State swiperData: string[] = [
    "/common/images/banner1.jpg",
    "/common/images/banner2.jpg",
    "/common/images/banner3.jpg"
  ]

  build() {
    Column() {
      // Swiper容器
      Swiper(this.swiperController) {
        ForEach(this.swiperData, (item: string) => {
          Image(item)
            .width('100%')
            .height(200)
            .objectFit(ImageFit.Cover)
        })
      }
      .width('100%')
      .height(200)
      .loop(true)  // 循环播放
      .autoPlay(true)  // 自动播放
      .interval(3000)  // 3秒间隔
      .indicator(true)  // 显示分页指示器
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
  }
}

2. 自定义分页指示器

javascript 复制代码

// 在Column中添加自定义指示器
Row() {
  ForEach(this.swiperData, (item: string, index: number) => {
    Circle()
      .width(8)
      .height(8)
      .fill(index === this.currentIndex ? Color.Blue : Color.Gray)
      .margin(5)
  })
}
.margin({ top: 10 })
.justifyContent(FlexAlign.Center)

3. 添加控制按钮（可选）

javascript 复制代码

Row() {
  Button('上一张')
    .onClick(() => {
      this.swiperController.showPrevious()
    })
  
  Button('下一张')
    .onClick(() => {
      this.swiperController.showNext()
    })
}
.padding(10)

完整示例代码

javascript 复制代码

@Entry
@Component
struct BannerSwiper {
  @State currentIndex: number = 0
  private swiperController: SwiperController = new SwiperController()

  @State swiperData: Resource[] = [
    $r('app.media.banner1'),
    $r('app.media.banner2'),
    $r('app.media.banner3')
  ]

  build() {
    Column() {
      // 轮播图主体
      Swiper(this.swiperController) {
        ForEach(this.swiperData, (item: Resource) => {
          Image(item)
            .width('100%')
            .height(240)
            .borderRadius(8)
            .objectFit(ImageFit.Cover)
        })
      }
      .width('90%')
      .height(240)
      .loop(true)
      .autoPlay(true)
      .interval(3000)
      .indicator(false)
      .onChange((index: number) => {
        this.currentIndex = index
      }

      // 自定义指示器
      Row() {
        ForEach(this.swiperData, (item: Resource, index: number) => {
          Circle()
            .width(index === this.currentIndex ? 12 : 8)
            .height(8)
            .fill(index === this.currentIndex ? '#007DFF' : '#33000000')
            .margin(4)
            .animation({ duration: 200, curve: Curve.EaseInOut })
        })
      }
      .margin({ top: 12 })
    }
    .width('100%')
    .padding(16)
  }
}