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

前言

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

实现效果

需求分析

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

• 支持自定义指示器。

  技术实现

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

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

1. 选择好 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)
     }
   
   }

2. 自定义LazyData 类，实现 IDataSource 接口，并实现其中的方法即可。简单实现了展示功能后，接下来为轮播图提供一些基本属性。

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

3. 由于 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)
    }

总结

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