鸿蒙(HarmonyOS)应用开发——简易版轮播图

简述

轮播图在应用中，已经很常见的展现方式。像uniapp、iview，viewUI等前端组件框架，都提供了轮播图组件。那么在harmonyOS中，如果要实现轮播，我们是使用swiper 组件

swiper组件

swiper 组件是一种容器组件。它提供切换子组件显示的能力。

属性

事件

代码实现

新建一个项目 ImgSwiper

新建组件ImgSwiperComponent

在ets 文件夹下新建文件夹ImgSwiperComponent，然后新建ImgSwiperComponent.ets

import  {StyleConstants} from  './constants/StyleConstants'


@Component
export struct  ImgSwiperComponent{

  @Link imgList: Resource[];

  @Prop index:number;

  @Prop autoPlay:boolean;

  @Prop loop:boolean;

  @Prop indicator:boolean;


  build(){
      Swiper(){
        ForEach(this.imgList,(item)=>{
            Image(item)
              .width(StyleConstants.FULL_WIDTH)
              .height(StyleConstants.Swiper_HEIGHT)
        },(item)=>JSON.stringify(item))
      }
      .index(0)
      .autoPlay(true)
      .height(StyleConstants.Swiper_HEIGHT)
      .loop(true)
      .indicator(true)


  }

}

export class StyleConstants{

  static readonly FULL_WIDTH:string ="100%"

  static readonly Swiper_HEIGHT:string = "30%"
}

在资源文件中，引入临时文件

如果你还没有对接api ，只是静态页面，可以在资源文件中引入图片文件

在开发页面中使用ImgSwiperComponent组件

• 引入组件

import {ImgSwiperComponent} from '../components/ImgSwiperComponent/ImgSwiperComponent'

• 在页面初始化前初始化图片数据

aboutToAppear(){
    this.imgList.push($r('app.media.ic_banner01'))
    this.imgList.push($r('app.media.ic_banner02'))

  }

• 完整代码

import {ImgSwiperComponent} from '../components/ImgSwiperComponent/ImgSwiperComponent'


@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imgList: Resource[]=[];



  aboutToAppear(){
    this.imgList.push($r('app.media.ic_banner01'))
    this.imgList.push($r('app.media.ic_banner02'))

  }



  build() {
    Flex(){
      ImgSwiperComponent({imgList:$imgList,autoPlay:true,index:0,loop:true,indicator:true})
    }


  }
}

展示效果