HarmonyOS开发之(下拉刷新,上拉加载)控件pulltorefresh组件的使用

效果图:

一:下载安装(地址:OpenHarmony-SIG/PullToRefresh)

ohpm install @ohos/pulltorefresh

二:使用lazyForEarch的数据作为数据源

export  class  BasicDataSource implements IDataSource{private listeners: DataChangeListener[] = []public totalCount(): number {return 0}public getData(index: number): Object {return index}// 该方法为框架侧调用,为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)})}// 通知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)})}// 数据移动起始位置与数据移动目标位置交换完成后调用notifyDataMove(from: number, to: number): void {this.listeners.forEach(listener => {listener.onDataMove(from, to)})}
}
export  class MyDataNewSource extends BasicDataSource{private dataArray:  string[]=[]public totalCount(): number {return this.dataArray.length}public getData(index: number): Object {return this.dataArray[index]}public addData(index: number, data: string): void {this.dataArray.splice(index, 0, data)this.notifyDataAdd(index)}public pushData(data: string): void {this.dataArray.push(data)this.notifyDataAdd(this.dataArray.length - 1)// 重新加载}public clear():void{this.dataArray=[]}
}

三:快速使用

import router from '@ohos.router';
import { dateList } from '../model/wallpaperBeanList';
import weatherApi from '../DbUtils/WeatherApi';
import { MyDataNewSource} from '../DbUtils/MyDataSource';
import { PullToRefresh, PullToRefreshConfigurator } from '@ohos/pulltorefresh'@Component
export struct WallpaperPage {@State typeID: number = 0@State wallpaperUrlList: dateList [] = []dataSource: MyDataNewSource = new MyDataNewSource()// 需绑定列表或宫格组件private scroller: Scroller = new Scroller()timer: null | number = nullprivate currentPage: number = 1;//当前页码private pageSize: number = 12; // 默认加载数量private refreshConfigurator: PullToRefreshConfigurator = new PullToRefreshConfigurator();aboutToAppear() {this.refreshConfigurator.setHasRefresh(true)// 是否具有下拉刷新功能.setHasLoadMore(true)// 是否具有上拉加载功能.setMaxTranslate(150)// 可下拉上拉的最大距离.setSensitivity(1)// 下拉上拉灵敏度.setListIsPlacement(false)// 滑动结束后列表是否归位.setAnimDuration(300)// 滑动结束后,回弹动画执行时间.setRefreshHeight(50)// 下拉动画高度.setRefreshColor('#638EEF')// 下拉动画颜色.setRefreshBackgroundColor($r('app.color.home_bg'))// 下拉动画区域背景色.setRefreshTextColor('#638EEF')// 下拉加载完毕后提示文本的字体颜色.setRefreshTextSize(15)// 下拉加载完毕后提示文本的字体大小.setRefreshAnimDuration(1000)// 下拉动画执行一次的时间.setLoadImgHeight(50)// 上拉图片高度.setLoadBackgroundColor($r('app.color.home_bg'))// 上拉动画区域背景色.setLoadTextColor('#638EEF')// 上拉文本的字体颜色.setLoadTextSize(15)// 上拉文本的字体大小.setLoadTextPullUp1('请继续上拉...')// 上拉1阶段文本.setLoadTextPullUp2('释放即可刷新')// 上拉2阶段文本.setLoadTextLoading('加载中...') // 上拉加载更多中时的文本// .setRefreshCompleteTextHoldTime(500) //上拉刷新后停留的时间, 默认一秒, 建议设置500this.fetchWallpapers(this.currentPage)}//根据当前页面查找数据源(typeID=>类型id)private fetchWallpapers(pageNum: number = 1) {weatherApi.wallpaperList(this.typeID, pageNum, this.pageSize).then(wallpaperListBean => {this.wallpaperUrlList = wallpaperListBean.data.list // Assuming your API structurethis.dataSource.clear() // Clear the old datafor (let index = 0; index < this.wallpaperUrlList.length; index++) {this.dataSource.pushData(this.wallpaperUrlList[index].imgUrl)}}).catch(error => {console.error("Error fetching wallpapers:", error)})}build() {Column() {PullToRefresh({// 必传项,需绑定传入主体布局内的列表或宫格组件scroller: this.scroller,// 必传项,自定义主体布局,内部有列表或宫格组件customList: () => {// 一个用@Builder修饰过的UI方法this.getListView()},refreshConfigurator:this.refreshConfigurator,mWidth:'100%',mHeight:'100%',// 可选项,下拉刷新回调onRefresh: () => {return new Promise<string>((resolve, reject) => {// 网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据this.fetchWallpapers(1) // Fetch first page datathis.currentPage = 1 // Reset the page countthis.timer = setTimeout(() => {resolve('刷新成功')console.log(' 刷新成功')}, 2000)})},// 可选项,上拉加载更多回调onLoadMore: () => {return new Promise<string>((resolve, reject) => {// 网络请求操作,请求网络2秒后得到数据,通知组件,变更列表数据this.currentPage++; // Increment the page numberthis.fetchWallpapers(this.currentPage); // Fetch the next page of datathis.timer = setTimeout(() => {resolve('上拉加载完成')console.log('上拉加载完成')}, 2000)})},customLoad: null,customRefresh: null,})}.width('100%').height('100%')}@Builderprivate getListView() {Grid(this.scroller) {LazyForEach(this.dataSource, (item, index) => {GridItem() {// 显示网络图片Image(item || $r('app.color.color_white_f0f8')).width('100%').height('20%').alt($r('app.color.color_white_f0f8')).borderRadius(8).onAppear(() => { //组件挂载显示触发if (index) {console.log("Loading  onAppear: index=" + item + ' content= ' + this.dataSource.getData(index));}}).onDisAppear(() => { //组件卸载载显示触发if (index) {console.log("Loading  onDisAppear: index=" + index + ' content= ' + this.dataSource.getData(index));}}).onClick(() => this.handleImageClick(item)); // 注册点击事件}}, (item: string) => item)}.columnsTemplate('1fr 1fr 1fr').columnsGap(15).rowsGap(10).cachedCount(10).margin({top:15}).layoutDirection(GridDirection.Row).width('90%').height('100%')}aboutToDisappear() {clearTimeout(this.timer)this.dataSource.clear()}// 处理点击事件handleImageClick(imageUrl: string) {router.pushUrl({url: "pages/WallpaperDetailsPage",params: {imageUrl: imageUrl}})}
}

注意:在api9 开发的时候注意以下两点

1,依赖PullToRefresh 中

@Link data: Object[] 改==》 @State data: Object[]=[];

不然使用的时候PullToRefresh 会报:'@Link' decorated 'data' must be initialized through the component constructor. <ArkTSCheck>

2,同样的在PullToRefresh中找到 this.scroller.isAtEnd(),注释掉,api9 中找不到 this.scroller.isAtEnd()方法

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

外卖会员卡是不是一个骗局?

大家好&#xff0c;我是鲸天科技千千&#xff0c;大家都知道我是做小程序开发的&#xff0c;平时会给大家分享一些互联网相关的创业项目&#xff0c;感兴趣的可以跟我关注一下。 首先就是要搭建一个自己的外卖会员卡系统小程序&#xff0c;我们自己的工作就是把这个小程序推广…

海外云手机——跨国业务的高效工具

海外云手机是一种基于云计算的虚拟手机服务&#xff0c;依托海外服务器实现跨国网络访问。这项服务不仅具备传统智能手机的所有功能&#xff0c;还突破了地域限制&#xff0c;为跨国业务提供更加便捷、高效、安全的解决方案。 随着全球化的加速和互联网的快速普及&#xff0c;跨…

LabVIEW减速机加载控制系统

为了保障减速机的产品质量&#xff0c;开发了一套基于LabVIEW的减速机加载控制系统。该系统利用先进的传感技术与自动化控制理念&#xff0c;实现了减速机性能的全面测试与分析&#xff0c;有效提升了生产线的自动化水平与检测效率。 项目背景 随着工业自动化水平的不断提高&a…

002 JavaClent操作RabbitMQ

Java Client操作RabbitMQ 文章目录 Java Client操作RabbitMQ1.pom依赖2.连接工具类3.简单模式4.工作队列模式&#xff08;work&#xff09;公平调度示例 5.发布/订阅模式&#xff08;fanout&#xff09;交换机绑定示例代码 6.路由模式&#xff08;direct&#xff09;7.Topic匹配…

基于yolov8的无人机检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的无人机检测系统是一项前沿技术&#xff0c;结合了YOLOv8深度学习模型的强大目标检测能力与无人机的灵活性。YOLOv8作为YOLO系列的最新版本&#xff0c;在检测精度和速度上均有显著提升&#xff0c;特别适用于复杂和高动态的场景。 该系统通过捕获实…

quartz 搭配SQL Server时出现deadlock的解决方案

背景&#xff1a; 最近在折腾换OA系统&#xff0c;遇到了一个很诡异的事情。在测试阶段&#xff0c;OA系统经常莫名地宕机&#xff0c;停止响应。查下来&#xff0c;发现是数据库出现大量死锁&#xff0c;耗尽了连接池。出现问题的语句是一样的&#xff0c;问题锁定在QRTZ_TRI…

学习使用在windows系统上安装vue前端框架以及环境配置图文教程

学习使用在windows系统上安装vue前端框架以及环境配置图文教程 1、安装nodejs2、安装vue3、安装Vue-cli脚手架4、安装高版本5、创建vue项目6、启动项目7、配置开发环境8、发布项目 1、安装nodejs 点我查看教程 2、安装vue winR&#xff0c;打开cmd cnpm install vue -g表示安…

COMDEL电源维修CLX2500康戴尔射频电源维修

美国COMDEL射频电源维修常见型号包括&#xff1a;CLX2750&#xff1b;CLX2500&#xff1b;CLX-600H&#xff1b;CX600AS&#xff1b;CX-5000S&#xff1b;CX-3500S&#xff1b;CX-2500S&#xff1b;CV500&#xff1b;CDX2000等。 Comdel成立于1966年&#xff0c;总部设在马萨诸…

pdf转jpg工具分享,4款搞定90%的PDF转格式

PDF转换真的是要学会的技能&#xff0c;我最近遇到了一个难题&#xff1a;我需要将一些PDF文件转换成JPG格式&#xff0c;以便在不同的设备上查看和编辑。我尝试了几个不同的工具&#xff0c;今天&#xff0c;我就来和大家分享一下我的使用体验&#xff0c;希望能帮到和我一样在…

企业社会信任数据,信任指数(2004-2022年)

企业社会信任是指公众对企业及其行为的信任程度&#xff0c;这种信任度是基于企业的商业行为、产品质量、服务态度、信息披露透明度和社会责任履行等多方面因素的综合评估。 2004年&#xff0d;2022年 企业社会信任数据&#xff08;大数据&#xff09;https://download.csdn.n…

Netty笔记06-组件ByteBuf

文章目录 概述ByteBuf 的特点ByteBuf的组成ByteBuf 的生命周期 ByteBuf 相关api1. ByteBuf 的创建2. 直接内存 vs 堆内存3. 池化 vs 非池化4. ByteBuf写入代码示例 5. ByteBuffer扩容6. ByteBuf 读取7. retain() & release()TailContext 释放未处理消息逻辑HeadContext 8. …

电脑与电脑之间怎么快速传输文件?

若两台电脑在同一局域网&#xff0c;可以使用Windows远程桌面传输文件&#xff0c;或者使用远程看看这款免费的远程桌面软件&#xff0c;它支持在不同的网络之间传输文件&#xff0c;而且速度快、安全性高。 步骤1. 在两台电脑上下载、安装并运行远程看看。 步骤2. 注册一个远…

CGAL 从DSM到DTM filtering

CGAL 从DSM到DTM filtering 上一节通过连通区域计算并将连通信息保存到三角面片中&#xff0c;获取了多个连通区域&#xff0c;本节将设置阈值将建筑物区域移除&#xff0c;生成一个最初的DTM。 建筑物区域去除 设置阈值为min_size&#xff0c;遍历三角面片&#xff0c;对连…

macOS系统Homebrew工具安装及使用

1.打开Homebrew — The Missing Package Manager for macOS (or Linux) 2.复制安装命令到终端执行 复制 执行 3. 开始自动安装过程 4.安装成功 5.使用brew安装wget工具

基于SSM的在线家教管理系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的在线家教管理系统拥有三个角色 管理员&#xff1a;用户管理、教师管理、简历管理、申请管理、课程管理、招聘教师管理、应聘管理、评价管理等 教师&#xff1a;课程管理、应聘…

掌握ZooKeeper的业务使用场景,ZooKeeper如何实现分布式锁

1. ZooKeeper分布式锁 1.1 排他锁实现分布式锁 面试官&#xff1a;知道Zookeeper有什么应用场景吗? 目前地球村里大型公司部署的分布式技术&#xff0c;绝大部分都是由Zookeeper提供底层的技术支持&#xff0c;所以Zookeeper多么重要就不用我多说了吧。 我们可以利用Zookeep…

STM32使用 :串口的接收与发送

一、串口 在 STM32 中&#xff0c;串口&#xff08;UART&#xff0c;通用异步收发传输器&#xff09;是用于串行通信的外设。它在嵌入式系统中的作用非常广泛&#xff0c;主要包括几个方面 数据通信 串口用于微控制器与其他设备之间的数据传输。这些设备可以是其他微控制器、…

mysql的zip解压缩版安装

文章目录 一、MySQL下载二、mysql解压缩版安装1、解压缩2、设置环境变量3、mysql初始化4、安装mysql服务5、启动mysql服务6、连接mysql7、修改初始密码8、安装完成 一、MySQL下载 下载网址&#xff1a;MySQL下载 本文以mysql8.4.2版本为例下载解压缩版。 二、mysql解压缩版安…

MS SQL Server 实战 排查多列之间的值是否重复

目录 需求 范例运行环境 数据样本设计 功能实现 上传EXCEL文件到数据库 SQL语句 小结 需求 在日常的应用中&#xff0c;排查列重复记录是经常遇到的一个问题&#xff0c;但某些需求下&#xff0c;需要我们排查一组列之间是否有重复值的情况。比如我们有一组题库数据&…

STM32的寄存器深度解析

目录 一、STM32 寄存器概述 二、寄存器的定义与作用 三、寄存器分类 1.内核寄存器 2.外设寄存器 四、重要寄存器详解 1.GPIO 相关寄存器 2.定时器相关寄存器 3.中断相关寄存器 4.RCC 相关寄存器 五、寄存器操作方法 1.直接操作寄存器 2.使用库函数操作寄存器 六…