当前位置: 首页 > news >正文

鸿蒙开发深入浅出03(封装通用LazyForEach实现懒加载)

鸿蒙开发深入浅出03(封装通用LazyForEach实现懒加载)

  • 1、效果展示
  • 2、ets/models/BasicDataSource.ets
  • 3、ets/models/HomeData.ets
  • 4、ets/api/home.ets
  • 5、ets/pages/Home.ets
  • 6、ets/views/Home/SwiperLayout.ets
  • 7、后端代码

1、效果展示

在这里插入图片描述

在这里插入图片描述

2、ets/models/BasicDataSource.ets

// BasicDataSource实现了IDataSource接口,用于管理listener监听,以及通知LazyForEach数据更新
// https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-lazyforeach-V5#stringdata%E7%B1%BB%E5%9E%8B%E6%95%B0%E7%BB%84%E7%9A%84basicdatasource%E4%BB%A3%E7%A0%81
export default class BasicDataSource<T> implements IDataSource {// 内部用来触发UI更新的对象private listeners: DataChangeListener[] = [];// 管理的数据private list: T[] = [];// 返回数据总长度public totalCount(): number {return this.list.length;}// 读取对应下标的数据public getData(index: number): T {return this.list[index];}// 保存单个数据public setData(item: T) {// 只会更新数据,不会更新UIthis.list.push(item);// 更新UI操作this.notifyDataAdd(this.list.length - 1);}// 更新所有列表数据public setList(list: T[]) {this.list = list;// 全部通知修改this.notifyDataReload();}// 该方法为框架侧调用,为LazyForEach组件向其数据源处添加listener监听registerDataChangeListener(listener: DataChangeListener): void {if (this.listeners.indexOf(listener) < 0) {console.info('add listener');this.listeners.push(listener);}}// 该方法为框架侧调用,为对应的LazyForEach组件在数据源处去除listener监听unregisterDataChangeListener(listener: DataChangeListener): void {const pos = this.listeners.indexOf(listener);if (pos >= 0) {console.info('remove listener');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);// 写法2:listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]);})}// 通知LazyForEach组件在index对应索引处数据有变化,需要重建该子组件notifyDataChange(index: number): void {this.listeners.forEach(listener => {listener.onDataChange(index);// 写法2:listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]);})}// 通知LazyForEach组件需要在index对应索引处删除该子组件notifyDataDelete(index: number): void {this.listeners.forEach(listener => {listener.onDataDelete(index);// 写法2:listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]);})}// 通知LazyForEach组件将from索引和to索引处的子组件进行交换notifyDataMove(from: number, to: number): void {this.listeners.forEach(listener => {listener.onDataMove(from, to);// 写法2:listener.onDatasetChange(//         [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]);})}notifyDatasetChange(operations: DataOperation[]): void {this.listeners.forEach(listener => {listener.onDatasetChange(operations);})}
}

3、ets/models/HomeData.ets

注意因为我们这个模块使用了BasicDataSource.ets,所以从鸿蒙开发深入浅出02(封装Axios请求、渲染Swiper)需改为ets后缀。

import BasicDataSource from './BasicDataSource';@Observed
export class BasicListDataSource<T> extends BasicDataSource<T> {lists: T[] = [];
}export interface IHomeData {"bannerList": IBannerList"navList": INavList"tileList": ITileList"planList": IPlanList"adPicture": string
}// 计划列表类型
export interface IPlanItem {"id": number"imageURL": string
}export type IPlanList = IPlanItem[]// 瓷片列表类型
export interface ITileItem {"id": number"imageURL": string"title": string"sub_title": string
}export type ITileList = ITileItem[]// 导航列表类型
export interface INavItem {"id": number"title": string"imageURL": string
}export type INavList = INavItem[]// 轮播图类型
export interface IBannerItem {"id": number"name": string"imageURL": string
}export type IBannerList = IBannerItem[]

4、ets/api/home.ets

同 3 所述,home.ts 也需改为 ets 结尾,并添加返回类型。

import { http } from '../utils/http'
import type { IHomeData } from '../models/HomeData'// 获取页面数据
export const getHomeDataApi = (): Promise<IHomeData> => {return http.get<IHomeData>('/home/info')
}

5、ets/pages/Home.ets

import { getHomeDataApi } from "../api/home"
import { BasicListDataSource, IBannerItem, IBannerList } from "../models/HomeData"
import SwiperLayout from '../views/Home/SwiperLayout'/*** MyHouseApplication #项目的名称* Home.ets #文件名称* Created by zhong ON 2025/2/23 #作者及添加日期*/
@Component
export default struct Home {@State bannerList: BasicListDataSource<IBannerItem> = new BasicListDataSource();// 获取首页数据的函数getHomeData = async () => {const result = await getHomeDataApi();this.bannerList.setList(result.bannerList);}// 生命周期函数,初始化页面时触发aboutToAppear(): void {this.getHomeData();}build() {Scroll() {Column() {SwiperLayout({ bannerList: this.bannerList });}.width('100%')}.width('100%').height('100%').scrollBar(BarState.Off).align(Alignment.TopStart)}
}

6、ets/views/Home/SwiperLayout.ets

/*** MyHouseApplication #项目的名称* SwiperLayout.ets #文件名称* Created by zhong ON 2025/2/23 #作者及添加日期*/
import { IBannerItem, BasicListDataSource } from "../../models/HomeData"@Component
export default struct SwiperLayout {@ObjectLink bannerList: BasicListDataSource<IBannerItem>;build() {Swiper() {LazyForEach(this.bannerList, (banner: IBannerItem) => {Image(banner.imageURL).width('100%').height('100%').objectFit(ImageFit.Fill)}, (banner: IBannerItem) => banner.id + '')}.width('100%').height(211 - 36).indicator(new DotIndicator().color($r('app.color.indicator_color')).selectedColor($r('app.color.indicator_active_color')))}
}

7、后端代码

双击 zufangBackend-windows-amd64.exe 运行

在这里插入图片描述

相关文章:

鸿蒙开发深入浅出03(封装通用LazyForEach实现懒加载)

鸿蒙开发深入浅出03&#xff08;封装通用LazyForEach实现懒加载&#xff09; 1、效果展示2、ets/models/BasicDataSource.ets3、ets/models/HomeData.ets4、ets/api/home.ets5、ets/pages/Home.ets6、ets/views/Home/SwiperLayout.ets7、后端代码 1、效果展示 2、ets/models/Ba…...

AWS - Redshift - 外部表读取 Parquet 文件中 timestamp 类型的数据

问题&#xff1a; 通过 Redshift Spectrum 功能可以读取 S3 中的文件&#xff0c;当读取 Parquet 文件时&#xff0c;如果列格式设置为 timestamp&#xff0c; 通过 psql 客户端读取会出现以下错误&#xff1a; testdb# select * from myspectrum_schema_0219.test_ns; ERROR…...

Ubuntu20.04之VNC的安装使用与常见问题

Ubuntu20.04之VNC的安装与使用 安装图形桌面选择安装gnome桌面选择安装xface桌面 VNC-Server安装配置开机自启 VNC Clientroot用户无法登入问题临时方案永久方案 安装图形桌面 Ubuntu20.04主流的图形桌面有gnome和xface两种&#xff0c;两种桌面的安装方式我都会写&#xff0c…...

vue3学习3-route

创建路由器&#xff1a; 应用路由器&#xff1a; 路由展示区RouterView 和 路由跳转RouterLink&#xff1a; 路由组件&#xff08;在路由配置文件中配置的&#xff09;一般放到pages/views文件夹下 路由组件切换的时候执行的是 挂载/卸载操作 onMounted / onUnmouted 路由器两…...

C++:dfs,bfs各两则

1.木棒 167. 木棒 - AcWing题库 乔治拿来一组等长的木棒&#xff0c;将它们随机地砍断&#xff0c;使得每一节木棍的长度都不超过 5050 个长度单位。 然后他又想把这些木棍恢复到为裁截前的状态&#xff0c;但忘记了初始时有多少木棒以及木棒的初始长度。 请你设计一个程序…...

RK Android11 WiFi模组 AIC8800 驱动移植流程

RK Android WiFi模组 AIC8800 驱动移植流程 作者&#xff1a;Witheart更新时间&#xff1a;20250220 概要&#xff1a;本文介绍了基于 AIC8800D40 芯片的 WiFi6 模组 BL-M8800DS2-40 在 RK3568 平台上的驱动移植流程。主要涉及环境搭建、驱动代码分析、设备树修改、驱动编译配…...

深度学习-6.用于计算机视觉的深度学习

Deep Learning - Lecture 6 Deep Learning for Computer Vision 简介深度学习在计算机视觉领域的发展时间线 语义分割语义分割系统的类型上采样层语义分割的 SegNet 架构软件中的SegNet 架构数据标注 目标检测与识别目标检测与识别问题两阶段和一阶段目标检测与识别两阶段检测器…...

免费送源码:ava+springboot+MySQL 基于springboot 宠物医院管理系统的设计与实现 计算机毕业设计原创定制

摘 要 在当今社会&#xff0c;宠物已经成为人们生活中不可或缺的一部分&#xff0c;因此宠物健康和医疗问题也备受关注。为了更好地管理宠物医院的日常运营和提供优质的医疗服务&#xff0c;本研究设计并实现了一套基于Spring Boot框架的宠物医院管理系统。这一系统集成了多项功…...

【电机控制器】ESP32-C3语言模型——DeepSeek

【电机控制器】ESP32-C3语言模型——DeepSeek 文章目录 [TOC](文章目录) 前言一、简介二、代码三、实验结果四、参考资料总结 前言 使用工具&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、简介 二、代码 #include <Arduino.h&g…...

小型字符级语言模型的改进方向和策略

小型字符级语言模型的改进方向和策略 一、回顾小型字符级语言模型的处理流程 前文我们已经从零开始构建了一个小型字符级语言模型,那么如何改进和完善我们的模型呢?有哪些改进的方向?我们先回顾一下模型的流程: 图1 小型字符级语言模型的处理流程 (1)核心模块交互过程:…...

力扣-贪心-56 合并区间

思路 先按照左区间进行排序&#xff0c;然后初始化left和right&#xff0c;重叠时&#xff0c;更新right&#xff0c;不重叠时&#xff0c;收集区间 代码 class Solution { public:static bool cmp(vector<int> a, vector<int> b){if(a[0] b[0]){return a[1] &…...

vue 3D 翻页效果

<template><view class"swipe-container" touchstart"onTouchStart" touchmove"onTouchMove" touchend"onTouchEnd"><view class"page">初始页</view></view> </template><script&g…...

【系列专栏】银行信息系统研发外包风险管控-08

银行信息系统研发外包风险管控 在金融科技日新月异的当下&#xff0c;银行业务对信息系统的依赖程度与日俱增。为了充分利用外部专业资源&#xff0c;提升研发效率并合理控制成本&#xff0c;许多银行选择将信息系统研发外包。然而&#xff0c;这一策略在带来诸多便利的同时&a…...

[ComfyUI] 【AI】如何获得一张人物图片的优质描述

在使用ComfyUI时,获取一张人物图片的优质英文描述非常重要,尤其是在涉及图像生成、自动化标签和多模态AI任务时。以下是一个简单的流程,可以帮助你快速从一张人物图片中提取出精确且高质量的英文描述。 1. 打开 Hugging Face 网站 首先,您需要访问 Hugging Face 提供的 J…...

深度学习基础--ResNet网络的讲解,ResNet50的复现(pytorch)以及用复现的ResNet50做鸟类图像分类

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 如果说最经典的神经网络&#xff0c;ResNet肯定是一个&#xff0c;这篇文章是本人学习ResNet的学习笔记&#xff0c;并且用pytorch复现了ResNet50&…...

stack,queue,priority_queue学习知识点

容器适配器 在c常用的容器中&#xff0c;有的是以容器迭代器为核心&#xff0c;而有的则以容器适配器为核心。较为常用的就包括queue和stack。接下来我将简单的以queue和stack的模拟实现介绍其特点。 在以下的模拟实现中&#xff0c;class Con就是我们的容器适配器&#xff0…...

css特异性,继承性

html <div class"introduce"><div class"title">介绍</div><div class"card-box"><div class"card"><div class"title">管理</div></div></div> </div> scs…...

力扣hot100刷题——11~20

文章目录 11.滑动窗口最大值题目描述思路&#xff1a;滑动窗口单调队列code 12.最小覆盖子串题目描述思路&#xff1a;双指针/滑动窗口哈希code Ⅰcode Ⅱ 13.最大子数组和题目描述思路&#xff1a;dp/贪心code 14.合并区间题目描述思路&#xff1a;贪心code 15.轮转数组题目描…...

R语言Stan贝叶斯空间条件自回归CAR模型分析死亡率多维度数据可视化

全文链接&#xff1a;https://tecdat.cn/?p40424 在空间数据分析领域&#xff0c;准确的模型和有效的工具对于研究人员至关重要。本文为区域数据的贝叶斯模型分析提供了一套完整的工作流程&#xff0c;基于Stan这一先进的贝叶斯建模平台构建&#xff0c;帮助客户为空间分析带来…...

速通HTML

目录 HTML基础 1.快捷键 2.标签 HTML进阶 1.列表 a.无序列表 b.有序列表 c.定义列表 2.表格 a.内容 b.合并单元格 3.表单 a.input标签 b.单选框 c.上传文件 4.下拉菜单 5.文本域标签 6.label标签 7.按钮标签 8.无语义的布局标签div与span 9.字符实体 HTML…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...