鸿蒙HarmonyOS Banner组件封装与使用解析

原创

于 2025-06-26 15:58:56 发布 · 580 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #鸿蒙 #鸿蒙开发 #UI #组件化

前言

轮播图在每个项目中都很常见，鸿蒙中在容器组件中也提供了Swiper组件，用于子组件滑动轮播显示，和前端的使用起来也是异曲同工，我们先看下基本的用法。

Swiper() {
          ForEach(["1", "2", "3", "4", "5", "6"], (item: string) => {
            Text(item.toString())
              .width('90%')
              .height(160)
              .backgroundColor(0xAFEEEE)
              .textAlign(TextAlign.Center)
              .fontSize(30)
          }, (item: string) => item)
        }

以上的代码便轻松的实现了一个轮播图效果，当然了，只是一个简单的案例，很多属性并没有设置，按照正常的使用而言，确实没必要再搞什么封装，但是，有一个潜在的问题是需要封装的，比如使用懒加载数据的时候，不封装的话，每实现一个轮播图就需要重复大量的代码，这显然是冗余的；还有一种场景，那就是，系统的轮播无法满足我们的需求，这种情况下，是不得不进行封装的。

本文的大致内容如下：

1、简单封装之后的代码及效果展示

2、基于Swiper进行懒加载数据和普通数据封装

3、开源地址

4、相关总结

一、简单封装之后的代码及效果展示

封装的Banner已经上传到了远程仓库，使用起来也是非常的简单

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

    ohpm install @abner/banner

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

 
    "dependencies": { "@abner/banner": "^1.0.0"}

效果没什么好说的，都是用Swiper组件所封装的。

代码实现上，毕竟采取了封装，简化了大量的代码，简单的案例如下：

Banner({
          data: ["1", "2", "3", "4", "5", "6"],
          itemPage: this.itemPage
       })

更多的案例，就不贴了，直接去看第3项中的开源地址即可。