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

简述

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

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

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

名称参数阐明change{ index: currentIndex }当前显示的组件索引变革时触发该事件rotation{ value: rotationValue }智能穿着表冠旋转事件触发时的回调。 代码实现

新建一个项目 ImgSwiper

新建组件ImgSwiperComponent

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

2. import  {StyleConstants} from  './constants/StyleConstants'
5. @Component
6. export struct  ImgSwiperComponent{
8.   @Link imgList: Resource[];
10.   @Prop index:number;
12.   @Prop autoPlay:boolean;
14.   @Prop loop:boolean;
16.   @Prop indicator:boolean;
19.   build(){
20.       Swiper(){
21.         ForEach(this.imgList,(item)=>{
22.             Image(item)
23.               .width(StyleConstants.FULL_WIDTH)
24.               .height(StyleConstants.Swiper_HEIGHT)
25.         },(item)=>JSON.stringify(item))
26.       }
27.       .index(0)
28.       .autoPlay(true)
29.       .height(StyleConstants.Swiper_HEIGHT)
30.       .loop(true)
31.       .indicator(true)
34.   }
36. }
38. export class StyleConstants{
40.   static readonly FULL_WIDTH:string ="100%"
42.   static readonly Swiper_HEIGHT:string = "30%"
43. }

复制代码

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

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

在开辟页面中使用ImgSwiperComponent组件

• 引入组件
  

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

复制代码

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

1. aboutToAppear(){
2.     this.imgList.push($r('app.media.ic_banner01'))
3.     this.imgList.push($r('app.media.ic_banner02'))
5.   }

复制代码

• 完整代码
  

1. import {ImgSwiperComponent} from '../components/ImgSwiperComponent/ImgSwiperComponent'
2. @Entry@Componentstruct Index {  @State message: string = 'Hello World'  @State imgList: Resource[]=[];  aboutToAppear(){
3.     this.imgList.push($r('app.media.ic_banner01'))
4.     this.imgList.push($r('app.media.ic_banner02'))
6.   }
7.   build() {    Flex(){      ImgSwiperComponent({imgList:$imgList,autoPlay:true,index:0,loop:true,indicator:true})    }  }}

复制代码

展示效果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。