鸿蒙(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
https://i-blog.csdnimg.cn/blog_migrate/6b00f71309f328d3f75dff33f26ee010.png
https://i-blog.csdnimg.cn/blog_migrate/ea08ef8cab37970949cab4d8977d4d4e.png
新建组件ImgSwiperComponent
在ets 文件夹下新建文件夹ImgSwiperComponent，然后新建ImgSwiperComponent.ets
https://i-blog.csdnimg.cn/blog_migrate/1a31084f3251f6bd98783da53f34529b.png
import{StyleConstants} from'./constants/StyleConstants'
@Component
export structImgSwiperComponent{
@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 ，只是静态页面，可以在资源文件中引入图片文件
https://i-blog.csdnimg.cn/blog_migrate/f75c256bb8775f63e58410f40f07478e.png
在开辟页面中使用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@Componentstruct 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}) }}} 展示效果
https://i-blog.csdnimg.cn/blog_migrate/2037dfe557e27ee56c566087d7d50282.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]