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

HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (二、首页轮播图懒加载的实现)

news 来源：原创 2025/6/19 6:19:08

在开发一款影视APP时，首页的轮播图是一个非常重要的部分。它不仅能够吸引用户的注意力，还能有效地推广重点内容。为了提升应用的性能和用户体验，可以实现轮播图的懒加载功能。本文将详细介绍如何在HarmonyOS NEXT应用开发中实现这一功能。

1. 数据源设计

开源仓库地址：https://atomgit.com/csdn-qq8864/hmmovie

好的作品是需要不断打磨，在你的学习和体验过程中有任何问题，欢迎到我的开源项目代码仓下面提交issue,持续优化。
在这里插入图片描述

首先，需要设计一个数据源类 BasicDataSource，该类会实现 IDataSource 接口，用于管理轮播图数据。以下是 BasicDataSource 的代码：

class BasicDataSource<T> implements IDataSource {private listeners: DataChangeListener[] = [];private originDataArray: T[] = [];totalCount(): number {return this.originDataArray.length;}getData(index: number): T {return this.originDataArray[index];}registerDataChangeListener(listener: DataChangeListener): void {if (this.listeners.indexOf(listener) < 0) {this.listeners.push(listener);}}unregisterDataChangeListener(listener: DataChangeListener): void {const pos = this.listeners.indexOf(listener);if (pos >= 0) {this.listeners.slice(pos, 1);}}// 通知LazyForEach组件需要重新重载所有子组件notifyDataReload(): void {this.listeners.forEach(listener => {listener.onDataReloaded();})}// 通知LazyForEach组件需要在index对应索引处添加子组件notifyDataAdd(index: number): void {this.listeners.forEach(listener => {listener.onDataAdd(index);})}
}

代码解释

private listeners: 用于存储数据变化的监听器。
private originDataArray: 存储原始数据的数组。
totalCount: 返回数据源中数据的总数。
getData: 根据索引获取数据。
registerDataChangeListener: 注册数据变化监听器。
unregisterDataChangeListener: 移除数据变化监听器。
notifyDataReload: 通知所有监听器数据需要重新加载。
notifyDataAdd: 通知所有监听器在指定索引处添加了新数据。

2. 扩展数据源以支持懒加载

接下来，需要扩展 BasicDataSource 类来实现轮播图数据的懒加载。这里创建一个 SwiperDataSource 类继承自 BasicDataSource，并添加了一些懒加载相关的功能：

class SwiperDataSource<T> extends BasicDataSource<T> {private dataArray: T[] = [];totalCount(): number {return this.dataArray.length;}getData(index: number): T {return this.dataArray[index];}// 在列表末尾添加数据并通知监听器pushData(data: T): void {this.dataArray.push(data);this.notifyDataAdd(this.dataArray.length - 1);}// 重载数据reloadData(): void {// 不会引起状态变化this.dataArray = [];// 必须通过DataChangeListener来更新this.notifyDataReload();}
}

代码解释

private dataArray: 存储懒加载后的数据。
pushData: 向数据数组中添加新数据，并通知监听器有新数据添加。
reloadData: 重置数据数组，并通知监听器数据需要重新加载。

3. 实现轮播图懒加载

在设计好数据源后，可以开始实现轮播图。使用 Swiper 和 LazyForEach 组件来实现懒加载。以下是首页轮播图的代码：

// 轮播图
Swiper(this.swiperController) {LazyForEach(this.swiperData, (item: SwiperItem) => {Stack({ alignContent: Alignment.Center }) {Image(item.imageUrl).width('100%').height(180).zIndex(1).onClick(() => {this.pageStack.pushDestinationByName("MovieDetailPage", { id:item.id }).catch((e:Error)=>{// 跳转失败，会返回错误码及错误信息console.log(`catch exception: ${JSON.stringify(e)}`)}).then(()=>{// 跳转成功});})// 显示轮播图标题Text(item.title).padding(5).margin({ top: 135 }).width('100%').height(60).textAlign(TextAlign.Center).maxLines(2).textOverflow({ overflow: TextOverflow.Clip }).fontSize(22).fontColor(Color.White).opacity(100)// 设置标题的透明度 不透明度设为100%，表示完全不透明.backgroundColor('#808080AA')// 背景颜色设为透明.zIndex(2).onClick(() => {this.pageStack.pushDestinationByName("MovieDetailPage", { id:item.id }).catch((e:Error)=>{// 跳转失败，会返回错误码及错误信息console.log(`catch exception: ${JSON.stringify(e)}`)}).then(()=>{// 跳转成功});})}}, (item: SwiperItem) => item.id)
}
.cachedCount(2)
.index(1)
.autoPlay(true)
.interval(4000)
.loop(true)
.indicatorInteractive(true)
.duration(1000)
.itemSpace(0)
.curve(Curve.Linear)
.onChange((index: number) => {console.info(index.toString())
})
.onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {console.info("index: " + index)console.info("current offset: " + extraInfo.currentOffset)
})
.height(180) // 设置高度

代码解释

Swiper: 轮播图组件，通过 this.swiperController 进行控制。
LazyForEach: 根据数据源动态渲染子组件。this.swiperData 是数据源实例，(item: SwiperItem) => item.id 是唯一标识符生成函数。
Stack: 容器组件，用于将图片和标题堆叠在一起。
Image: 显示轮播图的图片。
Text: 显示图片的标题，设置了最大行数、文字溢出处理、字体大小、颜色、背景颜色等属性。
cachedCount: 设置缓存的子组件数量。
index: 设置初始显示的图片索引。
autoPlay: 是否自动播放。
interval: 自动播放的时间间隔。
loop: 是否循环播放。
indicatorInteractive: 指示器是否可交互。
duration: 切换动画的持续时间。
itemSpace: 子组件之间的间距。
curve: 切换动画的曲线。
onChange: 当轮播图切换时触发的回调函数。
onGestureSwipe: 当用户进行滑动操作时触发的回调函数。

4. 总结

通过本文，学习了如何在HarmonyOS NEXT应用开发中实现轮播图的懒加载功能。这种方法不仅提升了应用的性能，还为用户提供了更好的使用体验。你可以根据实际需求对代码进行进一步的优化和扩展，以满足更多功能的实现。希望这篇文章对你有所帮助，欢迎在评论区交流和提问。

作者介绍

作者：csdn猫哥

原文链接：https://blog.csdn.net/yyz_1987

团队介绍

坚果派团队由坚果等人创建，团队拥有12个华为HDE带领热爱HarmonyOS/OpenHarmony的开发者，以及若干其他领域的三十余位万粉博主运营。专注于分享HarmonyOS/OpenHarmony、ArkUI-X、元服务、仓颉等相关内容，团队成员聚集在北京、上海、南京、深圳、广州、宁夏等地，目前已开发鸿蒙原生应用和三方库60+，欢迎交流。

版权声明

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (二、首页轮播图懒加载的实现)

在开发一款影视APP时，首页的轮播图是一个非常重要的部分。它不仅能够吸引用户的注意力，还能有效地推广重点内容。为了提升应用的性能和用户体验，可以实现轮播图的懒加载功能。本文将详细介绍如何在HarmonyOS NEXT应用开发中实现这一功能。 1.…...

编程日记 2025/6/4 16:29:50

Jmeter 简单使用、生成测试报告（一）

一、下载Jmter 去官网下载，我下载的是apache-jmeter-5.6.3.zip，解压后就能用。二、安装java环境 JMeter是基于Java开发的，运行JMeter需要Java环境。 1.下载JDK、安装Jdk 2.配置java环境变量 3.验证安装是否成功（java -versio…...

编程日记 2025/6/3 18:31:18

采用海豚调度器+Doris开发数仓保姆级教程（满满是踩坑干货细节，持续更新）

目录一、采用海豚调度器+Doris开发平替CDH Hdfs + Yarn + Hive + Oozie的理由。 1. 架构复杂性 2. 数据处理性能 3. 数据同步与更新 4. 资源利用率与成本 6. 生态系统与兼容性 7. 符合信创或国产化要求二、ODS层接入数据接入kafka实时数据踩坑的问题细节三、海…...

编程日记 2025/5/28 17:41:53

大疆最新款无人机发布，可照亮百米之外目标

近日，DJI 大疆发布全新小型智能多光旗舰 DJI Matrice 4 系列，包含 Matrice 4T 和 Matrice 4E 两款机型。DJI Matrice 4E 价格为27888 元起，DJI Matrice 4T价格为38888元起。图片来源：大疆官网 DJI Matrice 4E DJI Matrice 4T D…...

编程日记 2025/6/4 10:48:29

无公网IP 实现外网访问本地 Docker 部署 Navidrome

Navidrome 是一款可以在 macOS、Linux、Windows以及 Docker 等平台上运行的跨平台开源音乐服务器应用，它支持传输常见的 MP3、FLAC、WAV等音频格式。允许用户通过 Web 界面或 API 进行音乐库的管理和访问。本文就介绍如何快速在 Linux 系统使用 Docker 进行本地部署…...

编程日记 2025/6/3 3:20:16

踏上 C++ 编程之旅：开篇之作

踏上 C 编程之旅：开篇之作在计算机编程的广袤天地中，C 宛如一座巍峨的高峰，吸引着无数开发者攀登探索。今天，就让我们一同开启这段充满挑战与惊喜的 C 编程之旅，在代码的世界里开辟属于自己的道路。一、为什么选择…...

编程日记 2025/6/2 16:18:33

JS逆向系列之某考古站数据解密

声明本文章中所有内容仅供学习交流，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请私信我立即删除！文章目录声明本次目标网址逆向分析ing代码python实现最近太忙了，博客摆烂了好久，狗头保命.jpg。本次目标网址 aHR0cHM6Ly93d3cua2F…...

编程日记 2025/6/3 17:49:03

idea 如何安装 github copilot

idea 如何安装 github copilot 要在 IntelliJ IDEA 中安装 GitHub Copilot，可以按照以下步骤操作： 打开 IntelliJ IDEA: 启动 IntelliJ IDEA。打开插件管理器: 点击菜单栏中的 File。选择 Settings（Windows/Linux）或 Prefere…...

编程日记 2025/5/29 16:56:24

html5各行各业官网模板源码下载（4）

文章目录 1.来源2.源码模板2.1 html实现酷炫美观的可视化大屏(十种风格示例，附源码)2.2 HTML5实现古典音乐网站源码模板22.3 HTML5实现古典音乐网站源码模板32.4 HTML5实现小鸟过管道小游戏源码2.5 HTML5实现俄罗斯方块小游戏2.5 HTML5实现剪刀石头布小游戏(附源码)…...

编程日记 2025/6/4 14:43:18

2023-2024 学年广东省职业院校技能大赛(高职组)“信息安全管理与评估”赛题一

2023-2024 学年广东省职业院校技能大赛(高职组“信息安全管理与评估”赛题一） 模块一:网络平台搭建与设备安全防护第一阶段任务书任务 1：网络平台搭建任务 2：网络安全设备配置与防护DCRS:DCFW:DCWS:DCBC:WAF: 模块二：网络安全事件…...

编程日记 2025/5/24 21:34:06

理解CPU负载与使用率

目录 CPU使用率 CPU负载 CPU使用率定义：就像看一个工人干活的时间占他上班时间的比例。比如工人上班8小时，实际干活6小时，干活时间占比就是68100%75%。对于CPU，单核的看它被占用的时间占总时间的比例，多核的就把每个…...

编程日记 2025/5/29 20:55:44

鸿蒙-点击Notification通知并打开App的具体页面

意图通知获取router事件中传递参数并跳转目前点击通知消息打开应用的指定页面，通过为通知添加行为意图的方式。也就是在wants的parameters中设置自定义参数，然后在UIAbility的onNewWant或者onCreate方法中解析配置的自定义参数信息判断跳转不同页面&a…...

编程日记 2025/6/1 21:10:55

Jmeter分布式测试的注意事项和常见问题

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快 Jmeter是一款开源的性能测试工具，使用Jmeter进行分布式测试时，也需要注意一些细节和问题，否则可能会影响测试结果的准确性和可靠…...

编程日记 2025/6/3 14:06:09

w~Transformer~合集11

我自己的原文哦~ https://blog.51cto.com/whaosoft/12472192 #LightSeq 最高加速9倍！字节跳动开源8比特混合精度Transformer引擎,近年来，Transformer 已经成为了 NLP 和 CV 等领域的主流模型，但庞大的模型参数限制了它的高效训练和推理。…...

编程日记 2025/6/3 8:33:19

build.py ultralytics\data\build.py 目录 build.py 1.所需的库和模块 2.class InfiniteDataLoader(dataloader.DataLoader): 3.class _RepeatSampler: 4.def seed_worker(worker_id): 5.def build_yolo_dataset(cfg, img_path, batch, data, mode"train"…...

编程日记 2025/6/1 10:53:41

c++ 中的容器 vector、deque 和 list 的区别

表格汇总： 容器存储结构随机访问性能中间插入/删除性能两端插入/删除性能内存管理特点迭代器类型适用场景vector连续存储的动态数组 O ( 1 ) O(1) O(1) O ( n ) O(n) O(n)（需要移动元素）末尾： O ( 1 ) O(1) O(1)，头部…...

编程日记 2025/6/3 4:32:16

‌如何有效学习PyTorch：从基础到实践的全面指南‌

随着人工智能和深度学习技术的飞速发展，PyTorch作为当前最流行的深度学习框架之一，凭借其动态计算图、灵活的编程模型以及强大的社区支持，在学术界和工业界均得到了广泛应用。本文旨在为初学者和有一定基础的读者提供一套系统、全面的PyTorch…...

编程日记 2025/6/1 21:01:06

大模型WebUI：Gradio全解11——Chatbots：融合大模型的多模态聊天机器人（3）

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（3） 前言本篇摘要11. Chatbot：融合大模型的多模态聊天机器人11.3 组件Chatbot及ChatMessage11.3.1 Chatbot：聊天机器人组件1. API参数2.…...

编程日记 2025/6/3 20:22:41

MTK6768 Android13 亮度条均匀调节实现

文章目录需求：问题现象：需求实现疑难问题点：相关资源修改的文件调试技巧具体需求实现去除亮度弹框设置去掉跳转逻辑SystemUI亮度条长按跳转屏蔽实现亮度均匀调节PhoneWindowManager.javaBrightnessUtils convertLinearToGammaFloatBrightne…...

编程日记 2025/5/31 4:11:59

力扣560和为K的数组

给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。示例 1： 输入：nums [1,1,1], k 2 输出：2示例 2： 输入：nums [1,2,3], …...

编程日记 2025/6/3 6:16:26

【MVCC过程中会加锁吗？】

MVCC过程中会加锁吗？一、MVCC的工作原理二、MVCC的并发控制三、MVCC中的加锁情况在MVCC（Multi-Version Concurrency Control，多版本并发控制）过程中，通常不需要加锁来控制并发访问。 MVCC是一种数据并发控制技术，它允许在不同的事务中对同一数据进行并发访问，而不需要…...

编程日记 2025/5/30 19:26:27

LeetCode100之搜索二维矩阵(46)--Java

1.问题描述给你一个满足下述两条属性的 m x n 整数矩阵： 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。给你一个整数 target ，如果 target 在矩阵中，返回 true ；否则，返回…...

编程日记 2025/6/3 8:48:56

Android BottomNavigationView不加icon使text垂直居中，完美解决。

这个问题网上千篇一律的设置iconsize为0，labale固定什么的，都没有效果。我的这个基本上所有人用都会有效果。问题解决之前的效果：垂直方向，文本不居中，看着很难受问题解决之后：舒服多了其实很简单&…...

编程日记 2025/6/3 10:15:18

cmake + vscode + mingw 开发环境配置

1.软件准备准备如下软件： mingw64（安装完成之后检测是否有环境变量，如果没有需要配置） cmake（安装完成之后检测是否有环境变量，如果没有需要配置） vscode（安装CMake插件&#xff0…...

编程日记 2025/6/4 11:20:32

【GPON实战】ONT和OLT的vlan处理机制（一）

引言 ONT和OLT支持多种vlan配置，包括单层tag vlan，默认vlan（PVID），vlan转换，vlan翻译，双层vlan等等。那ONT和OLT是如何处理的呢？本文将介绍ONT和OLT对vlan的处理机制，第一篇介绍单层vlan场景ONT和OLT如何打vlan和剥离vlan，第二篇将介绍OLT是如何通过omci消息将vlan的…...

编程日记 2025/6/2 5:36:44

Qt模块概览（核心模块、GUI模块等）

Qt 模块概览 Qt 是一个跨平台的应用程序开发框架，广泛用于开发图形用户界面（GUI）程序，在前面的章节中，我们已经介绍了许多控件、布局的用法，这些都属于QT的GUI模块，当然QT也支持非 GUI 程序的开发，也就是核心模块。 Qt 框架由多个模块组成，每个模块提供特定的功能。…...

编程日记 2025/5/29 14:35:35

七大排序算法

文章目录排序的概念及引用1.插入排序2.希尔排序(缩小增量排序)3.选择排序4.堆排序5.冒泡排序6.快速排序7.归并排序8.代码排序部分的测试9.代码加效果大致测试时间（仅供参考） 排序的概念及引用排序:将数据按照特定的规律排成递增或递减的操作稳定性:…...

编程日记 2025/5/31 20:49:36

代理模式实现

一、概念：代理模式属于结构型设计模式。客户端不能直接访问一个对象，可以通过代理的第三者来间接访问该对象，代理对象控制着对于原对象的访问，并允许在客户端访问对象的前后进行一些扩展和处理；这种设置模式称为代理模…...

编程日记 2025/5/30 13:41:44

国产linux系统（银河麒麟，统信uos）使用 PageOffice 实现后台批量生成PDF文档

PageOffice 国产版 ：支持信创系统，支持银河麒麟V10和统信UOS，支持X86（intel、兆芯、海光等）、ARM（飞腾、鲲鹏、麒麟等）、龙芯（LoogArch）芯片架构。 PageOffice 版本&…...

编程日记 2025/5/30 6:50:06

基于若依的脚手架，扩展了flowable、mybatisPlus、lombok、前端美化

前言若依框架可以说是非常优秀的框架，奈何前端一直有点丑，而且集成的东西比较少，我就基于若依，做了一个轻美化版本，主要集成了工作流、mybatisPlus、lombok等工具。因为我也在用这个框架为公司做系统，所…...

编程日记 2025/6/4 11:20:33

LeetCode 热题 100 | 矩阵

矩阵基础使用哈希数组来标记当前行或者列是否出现0按层模拟 73. 矩阵置零题目讲解：LeetCode 重点： 使用标记数组：用两个标记数组分别记录每一行和每一列是否有零出现。使用两个标记变量：用矩阵的第一行和第一列代替两个标记数组…...

编程日记 2025/5/30 7:19:57

（经过验证）在 Ubuntu 系统中为 VSCode、PyCharm 终端及 Jupyter Notebook 配置代理的完整方案

文章目录 1. 通过系统环境变量配置代理步骤一：打开终端步骤二：编辑 ~/.bashrc 文件步骤三：添加代理环境变量步骤四：保存并关闭文件步骤五：使配置生效步骤六：重启相关应用步骤七：使用代理函数 2.…...

编程日记 2025/6/2 15:26:32

【Linux】sed编辑器二

一、处理多行命令 sed编辑器有3种可用于处理多行文本的特殊命令。 N：加入数据流中的下一行，创建一个多行组进行处理；D：删除多行组中的一行；P：打印多行组中的一行。 1、next命令：N 单行next命…...

编程日记 2025/6/3 7:05:10

STM32 FreeRTOS移植

目录 FreeRTOS源码结构介绍获取源码 1、官网下载 2、 Github下载源码结构介绍源码整体结构 FreeRTOS文件夹结构 Source文件夹结构如下 portable文件夹结构 RVDS文件夹 MemMang文件夹 FreeRTOS在基于寄存器项目中移植步骤目录添加源码文件工程添加源码文件 …...

编程日记 2025/6/2 4:53:19

python 寻找数据拐点

import numpy as np import cv2 from scipy.signal import find_peaks# 示例数据 y_data [365.63258786, 318.34824281, 258.28434505, 228.8913738, 190.87220447, 158.28434505, 129.53035144, 111.95846645, 111.95846645, 120.26517572, 140.71246006, 161.79872204, 180.…...

编程日记 2025/5/26 5:26:17

1. 数据源设计

代码解释

2. 扩展数据源以支持懒加载

代码解释

3. 实现轮播图懒加载

代码解释

4. 总结

团队介绍

版权声明

相关文章：