HarmonyOS开源第三方件组件——鸿蒙轮播组件Banner_harmonyos barnner图组件

前言

基于安卓平台的轮播组件Banner（https://github.com/youth5201314/banner/tree/release-1.4.10），实现了鸿蒙化迁移和重构，代码已经开源到（https://gitee.com/isrc_ohos/banner_ohos），目前已经获得了很多人的Star和Fork，欢迎各位下载使用并提出宝贵意见！

背景

Banner一般位于APP的顶部或中部，通过循环播放和手动滑动的方式对一些图片进行展示，其底部通常放置一行圆圈状的指示器，表示当前正在展示的图片的页码。Banner组件播放图片美观且节约页面，目前已经被广泛应用于各大APP。

功能展示

基于鸿蒙系统，通过自定义控件属性的方式实现了Banner组件，该组件支持图片的循环播放、手动滑动两种功能。

1. 循环播放

当页面没有任何操作时，Banner内部的图片按照提前设定时间间隔和顺序自动轮播，这种方式称为循环播放，效果如图一所示。

 

图一 循环播放功能展示

2. 手动滑动

手指在组件处滑动时，也可以实现图片的播放，此时图片的播放顺序由用户的滑动方向决定，播放时间间隔由用户的滑动速度决定。

图二 手动滑动功能展示

Sample解析

图三 Banner组件的标题和指示器

Sample中选取了五张图片进行轮播展示，每一张图片下方都添加了页码指示器和图片标题。页码指示器用于显示当前正在播放的图片的页码，标题用于显示图片的关键信息，效果如图三所示。Sample中给图片增加了点击事件，当用户对页面内容感兴趣时，可通过手指进行点击，图片会链接到另外的展示界面，效果如图四所示。

图四 图片支持点击事件的效果

下面对S