【鸿蒙 HarmonyOS】Swiper组件

一、背景

项目中通常会遇到图片轮播，内容轮播的场景；如：在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。

二、源码地址

✍Gitee开源项目地址👉：https://gitee.com/cheinlu/harmony-os-next-swiper

文档地址👉：文档中心

三、实现效果

  

四、代码示例

@Entry
@Component
struct Index {//轮播图数据源@State swiperList: ResourceStr[] = [$r("app.media.swiper_one"), $r("app.media.swiper_two"), $r("app.media.swiper_three"), $r("app.media.swiper_four"),$r("app.media.swiper_five")]@State selectedIndex: number = 0 //默认选中索引为0build() {Stack({ alignContent: Alignment.Bottom }) {Swiper() {ForEach(this.swiperList, (item: ResourceStr, index: number) => {Image(item).width('100%').height('100%')})}.onChange((index: number) => {this.selectedIndex = index}).autoPlay(true).indicator(false).itemSpace(0).width('100%').height('100%')//此处为自定义角标if (this.swiperList.length > 1) {List({ space: 5 }) {ForEach(this.swiperList, (item: ResourceStr, index: number) => {ListItem() {Image(this.selectedIndex === index ? $r("app.media.carousel_blue") : $r("app.media.carousel_gary")).width(20).aspectRatio(1)}})}.listDirection(Axis.Horizontal).align(Alignment.Center).enableScrollInteraction(false).hitTestBehavior(HitTestMode.Transparent).constraintSize({ maxWidth: '90%' }).height(20).margin({ left: 20, bottom: 20, right: 20 })}}}
}

4.1、属性说明

autoPlay：子组件是否自动播放。默认值：false

indicator：是否启用导航点指示器。默认值：true

itemSpace：设置子组件与子组件之间间隙。默认值：0。说明：不支持设置百分比。

4.2、自定义角标

官方文档默认角标效果：

通过如下代码更改角标样式，更换成菱形图片选中与未选中替换样式

🚀🚀🚀  踩坑不易，还希望各位大佬支持一下

📃 我的土拨鼠开源项目：

✍Gitee开源项目地址👉：https://gitee.com/cheinlu/groundhog-charging-system

✍GitHub开源项目地址👉：https://github.com/cheinlu/groundhog-charging-system

📃 我的鸿蒙NEXT轮播图开源组件：https://gitee.com/cheinlu/harmony-os-next-swiper

最后：👏👏😊😊😊👍👍