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

前言

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

实现效果

需求分析

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

技术实现

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

swiperController: SwiperController = new SwiperController()

Swiper(this.swiperController)

2. 选择好 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 接口，并实现其中的方法即可。

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

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

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

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

5. 自定义指示器组件。

@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)
  }

总结

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