HarmonyOS Next 之轮播图开发指南(Swiper组件)

案例效果

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

实现步骤

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)
  }
}
相关推荐
遇到困难睡大觉哈哈8 小时前
HarmonyOS 公共事件机制介绍以及多进程之间的通信实现(9000字详解)
华为·harmonyos
幽蓝计划11 小时前
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
开发语言·harmonyos
伍哥的传说11 小时前
鸿蒙系统(HarmonyOS)应用开发之实现电子签名效果
开发语言·前端·华为·harmonyos·鸿蒙·鸿蒙系统
Georgewu13 小时前
【HarmonyOS】应用开发拖拽功能详解
harmonyos
塞尔维亚大汉13 小时前
鸿蒙内核源码分析(构建工具篇) | 顺瓜摸藤调试鸿蒙构建过程
源码·harmonyos
kumalab16 小时前
HarmonyOS ArkTS卡片堆叠滑动组件实战与原理详解(含源码)
华为·harmonyos
别说我什么都不会17 小时前
【OpenHarmony】鸿蒙开发之xml2jsDemo
harmonyos
HarmonyOS_SDK20 小时前
HarmonyOS免密认证方案 助力应用登录安全升级
harmonyos
zhanshuo1 天前
鸿蒙操作系统核心特性解析:从分布式架构到高效开发的全景技术图谱
harmonyos
塞尔维亚大汉1 天前
鸿蒙内核源码分析(编译过程篇) | 简单案例窥视编译全过程
源码·harmonyos