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)
  }
}
相关推荐
万少10 小时前
AI编程神器!Trae+Claude4.0 简单配置 让HarmonyOS开发效率飙升 - 坚果派
前端·aigc·harmonyos
zhanshuo11 小时前
HarmonyOS UI 交互实战指南:教你用 ArkUI 打造高响应体验
harmonyos
zhanshuo11 小时前
新手也能搞定!鸿蒙开发者资源包获取与实战全流程指南
harmonyos
baobao熊17 小时前
HarmonyOS 6 云开发-用户头像上传云存储
华为·数据挖掘·harmonyos
优测云服务平台17 小时前
优测推出HarmonyOS全场景测试服务,解锁分布式场景应用卓越品质!
分布式·harmonyos
HarmonyOS小助手19 小时前
【宝藏贴】HarmonyOS官方模板优秀案例 · 第1期:便捷生活-购物中心
harmonyos·鸿蒙·鸿蒙生态
沫小北20 小时前
HarmonyOS Lottie动画库总结
前端·harmonyos
zhanshuo1 天前
如何用 ArkTS 实现丝滑又安全的表单输入验证?一篇文章讲清楚!
harmonyos
zhanshuo1 天前
掌握 ArkTS 复杂数据绑定:从双向输入到多组件状态同步
harmonyos
SuperHeroWu71 天前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
华为·harmonyos