HarmonyOs开发:轮播图Banner组件封装与使用

前言

轮播图在每个项目中都很常见,鸿蒙中在容器组件中也提供了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项中的开源地址即可。

相关属性配置

属性

类型

概述

data

Array<Object>

数据源

itemPage

(index: number, item: Object)

banner对应的页面

onChange

回调函数

条目切换监听

bannerHeight

Length

banner高度

bannerWidth

Length

banner宽度

autoPlay

boolean

是否自动播放,默认false

interval

number

默认3秒轮播一次

disableSwipe

boolean

是否禁止滑动

itemSpace

number

子组件之间的间隙

currentIndex

number

选中,默认第0个

indicator

DotIndicator | DigitIndicator | boolean

指示器

isLineIndicator

boolean

是否是自定义的线条指示器

indicatorType

IndicatorType

指示器位置

lineIndicatorWidth

number

线条指示器宽度

lineIndicatorHeight

number

线条指示器高度

lineIndicatorBgColor

ResourceColor

线条指示器背景

lineMargin

Margin | Length

线条指示器边距

isLoop

boolean

是否开启循环,默认是循环

indicatorRules

Record<string, Record<string, string | VerticalAlign | HorizontalAlign>>

线条指示器位置

isLazyData

boolean

是否使用数据懒加载

lazyCachedCount

number

缓存条目数量,默认是1

onLazyDataSource

(dataSource: BannerDataSource)

回调函数,用于控制数据的增删

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

首先Swiper的子组件是支持ForEach和LazyForEach进行渲染数据的,LazyForEach也就是数据懒加载模式,也是官方案例中默认推荐的模式,当组件滑出可视区域外时,框架会进行组件销毁回收以降低内存占用,但是两种渲染数据,在代码逻辑上是完全不同的。

ForEach就比较的简单,数据源是一个数组,在封装上也是非常的简洁:

Swiper(this.swiperController) {
        ForEach(this.data, (item: Object, index: number) => {
          this.itemPage(index, item)
        })
      }

LazyForEach模式,使用起来相对复杂,组件的创建包括两种情况:LazyForEach首次渲染和LazyForEach非首次渲染,这些都是需要考虑的。

ForEach数据加载,我们只考虑数据源的变化即可,但在LazyForEach中,必须使用DataChangeListener对象来进行更新,需要我们创建新的对象,实现IDataSource,进行数据的增删改查。

/**
 * AUTHOR:AbnerMing
 * DATE:2024/2/23
 * INTRODUCE:懒加载数据
 * */
export class BannerDataSource implements IDataSource {
  private listeners: DataChangeListener[] = []
  private originDataArray: Object[] = []

  /**
   * AUTHOR:AbnerMing
   * INTRODUCE:返回列表数量
   * */
  totalCount(): number {
    return this.originDataArray.length
  }

  /**
   * AUTHOR:AbnerMing
   * INTRODUCE:返回某一个对象
   * */
  getData(index: number): Object {
    return [this.originDataArray[index]]
  }

  /**
   * AUTHOR:AbnerMing
   * INTRODUCE:该方法为框架侧调用,为LazyForEach组件向其数据源处添加listener监听
   * */
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener);
    }
  }

  /**
   * AUTHOR:AbnerMing
   * INTRODUCE:该方法为框架侧调用,为对应的LazyForEach组件在数据源处去除listener监听
   * */
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      this.listeners.splice(pos, 1);
    }
  }

  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  // 通知LazyForEach组件在index对应索引处数据有变化,需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  // 通知LazyForEach组件将from索引和to索引处的子组件进行交换
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }

  //初始化数据
  public addData(index: number, data: Object): void {
    this.originDataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  //追加数据
  public pushData(data: Object): void {
    this.originDataArray.push(data);
    this.notifyDataAdd(this.originDataArray.length - 1);
  }

  //删除数据
  public deleteData(index: number): void {
    this.originDataArray.splice(index, 1);
    this.notifyDataDelete(index);
  }

  //交换数据
  public moveData(from: number, to: number): void {
    let temp: Object = this.originDataArray[from];
    this.originDataArray[from] = this.originDataArray[to];
    this.originDataArray[to] = temp;
    this.notifyDataMove(from, to);
  }

  /**
   * AUTHOR:AbnerMing
   * INTRODUCE:改变单个数据
   * */
  public changeData(index: number, data: Object): void {
    this.originDataArray.splice(index, 1, data);
    this.notifyDataChange(index);
  }

  //重置所有子组件的index索引
  public reloadData(): void {
    this.notifyDataReload();
  }

}

对于以上封装之后,在使用上需要注意,也就是更新数据的时候:

声明变量:

 @State bannerDataSource: BannerDataSource = new BannerDataSource()

赋值变量:

Banner({
          data: ["1", "2", "3", "4", "5", "6"],
          itemPage: this.itemPage,
          onLazyDataSource: (dataSource: BannerDataSource) => {
            this.bannerDataSource=dataSource
          }
        })

行为操作:

this.bannerDataSource.pushData()//追加数据
this.bannerDataSource.deleteData()//删除数据

三、开源地址

在开源地址中,对各个案例的使用方式,也做了相信的介绍。

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fbanner

四、相关总结

目前的轮播图,仅仅对Swiper做了简单的封装,另外增加了一个线条指示器,这远远是不够的,毕竟日常的轮播图形式多种多样,指示器也是千奇百怪,后续也会在此基础之上进行不断的扩展。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/501500.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

应用案例 | 复合机器人助力智能仓储物流实现高效发展

随着智能仓储物流技术的快速发展&#xff0c;复合机器人作为一种先进的自动化设备&#xff0c;正逐渐在仓储物流领域发挥重要作用。以下是一个复合机器人在智能仓储物流的应用案例。 案例背景 某大型电商企业面临着日益增长的订单量和仓储物流压力。为了提高物流效率、降低人力…

牛角工具箱源码 轻松打造个性化在线工具箱

&#x1f389; Whats this&#xff1f; 这是一款在线工具箱程序&#xff0c;您可以通过安装扩展增强她的功能 通过插件模板的功能&#xff0c;您也可以把她当做网页导航来使用~ 觉得该项目不错的可以给个Star~ &#x1f63a; 演示地址 https://tool.aoaostar.com &#x1f…

手动实现一个扩散模型DDPM

扩散模型是目前大部分AIGC生图模型的基座&#xff0c;其本质是用神经网络学习从高斯噪声逐步恢复图像的过程&#xff0c;本文用python代码从零开始构建了一个简单的扩散模型。 理论部分 DDPM(Denoising Diffusion Probabilistic Models) 是一种在生成对抗网络等技术的基础上发展…

MQTT.fx连接新版OneNet平台的一些问题

对于使用通信主题publish给OneNET时&#xff0c;如图所示&#xff1a; 但是点击Publish后&#xff0c;出现了Broker connection lost的问题 原因在于&#xff1a;新版OneNET和旧版OneNET的通信主题不一致了&#xff0c;查阅文档获知&#xff0c;格式如下&#xff1a; $sys/{p…

二叉树的深度和高度问题-算法通关村

二叉树的深度和高度问题-算法通关村 1 最大深度问题 LeetCode104: 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明&#xff1a;叶子节点是指没有子节点的节点。 对于node&#xff08;3&#xff09;&#xff0…

el-select的错误提示不生效、el-select验证失灵、el-select的blur规则失灵

发现问题 在使用el-select进行表单验证的时候&#xff0c;发现点击下拉列表没选的情况下&#xff0c;他不会提示没有选择选项的信息&#xff0c;我设置了rule如下 <!--el-select--><el-form-item label"等级" prop"level"><el-select v-m…

UE4_碰撞_使用蓝图控制物体移动时如何让被阻挡

当我们这样设置蓝图时&#xff1a; 运行效果&#xff1a; 利用蓝图更改一个物体的位置&#xff0c;发现本来两个应该相互阻挡的物体被穿过去了。为了不让相互阻挡的物体被穿过去&#xff0c;我们需要设置好蓝图节点的参数Sweep。 勾选之后 墙的蓝图我们这样设置&#xff1a; 运…

【Spring】SpringMvc项目当中,页面删除最后一条数据,页面不跳转并且数据为空。

期待您的关注 在之前学习SpringMvc的时候遇到过这样一个BUG&#xff0c;当我在一个页面删除该页面的最后一条数据的时候&#xff0c;一旦我删除成功&#xff0c;那么这个页面不会进行跳转&#xff0c;而是还停留在这个本不应该存在的页面&#xff0c;而且数据什么都没有。如下…

【JavaWeb】Day27.Web入门——Tomcat介绍

目录 WEB服务器-Tomcat 一.服务器概述 二.Web服务器 三.Tomcat- 基本使用 1.下载 2.安装与卸载 3.启动与关闭 4.常见问题 四.Tomcat- 入门程序 WEB服务器-Tomcat 一.服务器概述 服务器硬件&#xff1a;指的也是计算机&#xff0c;只不过服务器要比我们日常使用的计算…

Typora for Mac/Win:让Markdown编辑更高效,创作更自由

在数字化时代&#xff0c;文本编辑已成为我们日常生活与工作中的重要环节。Markdown作为一种轻量级标记语言&#xff0c;以其简洁、易读、易写的特性&#xff0c;受到了广大用户的喜爱。而Typora&#xff0c;作为一款专为Markdown设计的文本编辑器&#xff0c;更是让Markdown编…

DBeaver,一款实用的开源数据库管理软件

说起开源软件&#xff0c;其实大部分的体验和服务都是没有商业软件好的&#xff0c;毕竟养团队不是靠鼓励和奉献&#xff0c;咱们选择开源软件的主要原因还是免费&#xff0c;免费&#xff0c;免费。 由于公司限制安装商业软件&#xff0c;咱只能挑开源的替代&#xff0c;其中…

计算机专业在找工作时的注意事项

目录 说在前面关于我一些忠告关于简历关于银行写在最后 说在前面 满满的求生欲。我不是什么大佬&#xff0c;更没有能力教大家什么。只是看到有不少学弟学妹&#xff0c;还在为找一份工作焦头烂额&#xff0c;却没有努力的方向。所以这里斗胆给计算机相关专业的学弟学妹们的一…

如何在 Linux 中查找命令的执行时间

在 Linux 操作系统中&#xff0c;查找命令的执行时间对于优化系统性能、调试程序以及评估脚本效率至关重要。本文将介绍几种方法来准确地测量命令的执行时间。 使用时间命令 时间命令&#xff08;time&#xff09;是一个内置的 shell 命令&#xff0c;用于测量其他命令或程序的…

【日常记录】【JS】getBoundingClientRect 获取元素位置和大小

文章目录 1、介绍2、getBoundingClientRect3、参考链接 1、介绍 getBoundingClientRect() 是一个用于获取元素位置和大小的方法。它返回一个 DOMRect对象&#xff0c;其提供了元素的大小及其相对于视口的位置&#xff0c; 2、getBoundingClientRect 参数&#xff1a;这个方法…

设计模式之代理模式精讲

代理模式&#xff08;Proxy Pattern&#xff09;也叫委托模式&#xff0c;是一个使用率非常高的模式&#xff0c;比如我们在Spring中经常使用的AOP&#xff08;面向切面编程&#xff09;。 概念&#xff1a;为其他对象提供一种代理以控制对这个对象的访问。 代理类和实际的主题…

二、Java语法基础

1、Java语言的关键字、标识符及命名规范 1)java关键字 2)标识符 3)JAVA中的命名规范 包名的命名规范:域名.公司名称.项目名称.模块名称 类的命名规范:首字母大写,第二个单词的首字母大写,以此类推。 2、进制间的转换(二进制、十进制) 1)十进制->二进制 采用…

PHP 跳转搜索(Jump Search)

与二分搜索一样&#xff0c;跳转搜索是一种针对排序数组的搜索算法。基本思想是通过按固定步骤向前跳跃或跳过某些元素来代替搜索所有元素来检查更少的元素&#xff08;比线性搜索&#xff09;。例如&#xff0c;假设我们有一个大小为 n 的数组 arr[] 和一个大小为 m 的块&…

基于Hive大数据分析springboot为后端以及vue为前端的的民宿系

标题基于Hive大数据分析springboot为后端以及vue为前端的的民宿系 本文介绍了如何利用Hive进行大数据分析,并结合Spring Boot和Vue构建了一个民宿管理系统。该民民宿管理系统包含用户和管理员登陆注册的功能,发布下架酒店信息,模糊搜索,酒店详情信息展示,收藏以及对收藏的…

宝塔面板与1Panel的详细对比分析

在当今的服务器管理领域&#xff0c;宝塔面板和1Panel都是备受欢迎的管理工具。它们各自具有独特的特点和优势&#xff0c;同时也存在一些局限性。本文将从多个维度对比这两款产品&#xff0c;帮助用户根据自身需求做出更合适的选择。 宝塔面板 优点 易用性&#xff1a;宝塔…

vue的创建、启动以及目录结构详解

vue的创建、启动以及目录结构详解目录 一. vue项目的创建 二. vue的目录结构 三. src的目录结构 四. vue项目的启动 4.1 方法1 4.2 方法2 一. vue项目的创建 创建一个工程化的Vue项目&#xff0c;执行命令&#xff1a;npm init vuelatest 注意&#xff1a;如果你在这个目…
最新文章