前言
轮播图作为应用程序中最普通使用的控件被广泛应用，相信对于来发者来说并不陌生。在 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) }
总结
在鸿蒙实际开发中，实现一个轮播图是十分方便的，但是这并不是意味着所有功能都简单，还有一些看似简单的效果实现起来却是十分的复杂。学会的小伙伴赶紧动手试试吧！
