HarmonyOS 实战：3 秒实现一个自定义轮播图

2025-05-27
北京
本文字数：1898 字
阅读完需：约 6 分钟

前言

轮播图作为应用程序中最普通使用的控件被广泛应用，相信对于来发者来说并不陌生。在 Android 中实现一个轮播图很多选择使用第三方的插件，毕竟在有限的开发排期中自己动手去实现一个轮播图并不那么简单，需要考虑的细节很多。不过在 HarmonyOS 中实现一个轮播图却是十分的简单，本篇文章教你在最短的时间内快速实现一个自定义的轮播图，建议点赞收藏！

实现效果

需求分析

支持自定义循环播放，自动播放。
支持自定义播放时间间隔。
支持横向和竖向轮播。
支持自定义指示器。

技术实现

在鸿蒙原生开发中，为开发者提供了很多自由度高的控件，要想实现一个轮播图，最简单的方式就是选择合适的控件，这里使用的是官方提供的 Swiper 控件。Swiper 控件支持多种功能属性。


swiperController: SwiperController = new SwiperController()
Swiper(this.swiperController)

复制代码

选择好 Swiper 控件后，需要为 Swiper 控件提供数据。这里使用 LazyForEach 懒加载的方式，提高性能。注意如果使用 LazyForEach 的方式就需要搭配**IDataSource 使用。**

@State data: LazyData<PhotoData> = new LazyData()
Swiper(this.swiperController) {        LazyForEach(this.data, (item: PhotoData, index: number) => {          Image($r(`app.media.` + item.id))            .width('100%')            .height('30%')        }, (item: PhotoData) => JSON.stringify(item))      }

复制代码


export class LazyData<T> implements IDataSource{  // 监听器  private listeners: DataChangeListener[] = []  private array:Array<T> = []  totalCount(): number {   return this.array.length  }
  getData(index: number): T {    return this.array[index]  }
  registerDataChangeListener(listener: DataChangeListener): void {    if (this.listeners.indexOf(listener)<0) {      this.listeners.push(listener)    }  }
  unregisterDataChangeListener(listener: DataChangeListener): void {    const index = this.listeners.indexOf(listener)    if (index>=0) {      this.listeners.splice(index,1)    }  }  push(data:T){    this.array.push(data)  }
}

复制代码

自定义 LazyData 类，实现 IDataSource 接口，并实现其中的方法即可。

简单实现了展示功能后，接下来为轮播图提供一些基本属性。

      .loop(true) //是否轮播      .autoPlay(true) //是否自动播放      .interval(this.duration) //播放间隔时间      .indicator(true) //是否显示指示器      .vertical(false) //是否竖向播放      .indicatorStyle({selectedColor:this.bgColor,color:Color.White}) //指示器的相关配置

复制代码

由于 Swiper 提供的默认指示器可能不满足实际的开发需求，这里实现一个自定义的指示器。首先将默认指示器设置为 false，然后实现 onChange 方法，用来获取图片切换的下标。

 .indicator(false).onChange((index:number)=>{          this.currentIndex = index        })

复制代码

自定义指示器组件。

 @Builder  progressView() {    Row({ space: 5 }) {      LazyForEach(this.data, (item: PhotoData, index: number) => {        Stack({ alignContent: Alignment.Start }) {          Row()            .zIndex(1)            .width(this.currentIndex >= index && !this.slide ? '100%' : '0')            .height(2)            .borderRadius(2)            .backgroundColor(this.bgColor)            .animation(!this.slide ? {              duration: this.duration - 400,              curve: Curve.Linear,              iterations: 1,              playMode: PlayMode.Normal,              onFinish: () => {                if (this.currentIndex === this.data.totalCount() - 1) {                  this.duration = 400;                  this.currentIndex = -1;                }              }            } : { duration: 0, iterations: 1 })        }        .width('100%')        .height(2)        .borderRadius(2)        .backgroundColor(this.currentIndex >= index && this.slide ? this.bgColor : Color.Grey)        .layoutWeight(1)      }, (item: PhotoData) => JSON.stringify(item))    }    .width('50%')    .height(50)  }

复制代码

总结

在鸿蒙实际开发中，实现一个轮播图是十分方便的，但是这并不是意味着所有功能都简单，还有一些看似简单的效果实现起来却是十分的复杂。学会的小伙伴赶紧动手试试吧！

发布于: 刚刚阅读数: 5

IT小码哥

关注

还未添加个人签名 2021-04-29 加入

还未添加个人简介

发布

暂无评论

创作场景

HarmonyOS 实战：3 秒实现一个自定义轮播图

前言

实现效果

需求分析

技术实现

总结

IT小码哥

评论