鸿蒙(HarmonyOS)应用开发—

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

简述

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

swiper组件

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

属性

名称	类型	默认值	必填	说明
index	number	0	否	当前在容器中显示的子组件的索引值。
autoplay	boolean	false	否	子组件是否自动播放，自动播放状态下，导航点不可操作5+。
interval	number	3000	否	使用自动播放时播放的时间间隔，单位为ms。
indicator	boolean	true	否	是否启用导航点指示器，默认true。
digital5+	boolean	false	否	是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。
indicatordisabled5+	boolean	false	否	指示器是否禁止用户手势操作，设置为true时，指示器不会响应用户的点击拖拽。
loop	boolean	true	否	是否开启循环滑动。
duration	number	-	否	子组件切换的动画时长。
vertical	boolean	false	否	是否为纵向滑动，纵向滑动时采用纵向的指示器。
cachedsize7+	number	-1	否	swiper延迟加载时item最少缓存数量。-1表示全部缓存。
scrolleffect7+	string	spring	否	滑动效果。目前支持如下：- spring：弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。- fade：渐隐物理动效，滑动到边缘后展示一个波浪形的渐隐，根据速度和滑动距离的变化渐隐也会发送一定的变化- none：滑动到边缘后无效果。该属性仅在loop属性为false时生效。

事件

名称	参数	说明
change	{ index: currentIndex }	当前显示的组件索引变化时触发该事件
rotation	{ value: rotationValue }	智能穿戴表冠旋转事件触发时的回调。

代码实现

新建一个项目 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})}}
}