鸿蒙5.0【OpenHarmony】下拉刷新、上拉加载更多的 LazyRefresh

鸿蒙系统小能手Mr.Li

于 2024-08-27 16:06:37 发布

阅读量1k

点赞数 22

分类专栏：鸿蒙开发文章标签： harmonyos openharmony 鸿蒙鸿蒙系统程序员组件 UI

本文链接：https://blog.csdn.net/2401_82772199/article/details/141602355

版权

鸿蒙开发专栏收录该内容

264 篇文章 3 订阅

订阅专栏

自定义组件 LazyRefresh

HarmonyOS 中是一个易用，刷新组件，支持下拉刷新和上拉加载更多，header和footer。支持各种组件，List、Grid,WaterFlow

下拉刷新我们可以使用Refresh，
上拉更多，有两种方案，推荐使用第二种，可以更快的现实UI，加载时机更快
- 使用 onReachEnd() 监听到滑动到底部
- 使用 onScrollIndex 监听滑动到倒数第二个，或者第三个的时候，开始加载更多
- 使用 Item 的 onAppear监听当前index是倒数第二个，或者第三个的时候，开始加载更多

上图

支持功能

支持List、Grid、WaterFlow的下拉刷新和上拉加载更多
支持List、Grid 添加header，footer，WaterFlow 仅支持 Footer
增删改查简单封装
支持改变，当滑动到倒数第N个元素，开始加载更多
支持第一次进来是否开始触发loadMore

开始使用

ohpm install @nzy/lazy-refresh

使用说明

引入

import { LazyRefreshList, LazyRefreshController } from '@nzy/lazy-refresh';

使用

 // 控制的controller
 @Require controller: LazyRefreshController<Object> = new LazyRefreshController()
 xxx
 LazyRefreshList({
        // // 控制加载以及设置数据的controller
        controller: this.controller,
        // // 每个Item的布局
        listItem: this.listItem,
        // header
        header: this.header,
        // footer
        footer: this.footer,
        // List的space 间距
        space: 10,
        // LazyForEach 的 keyGenerator key生成器
        keyGenerator: (item: Object, index: number) => {
          return this.controller.getData(index).id.toString()
        },
        // Grid的缓存个数cachedCount
        cachedCount: 5,
        // 触发LoadMore时机，默认是1
        loadMoreLastIndex: 1,
        // 是否第一次进来就触发加载更多
        isAppearLoadMore: true,
        // 加载更多的回调
        onLoadMore: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作
            setTimeout(() => {
              resolve('加载更多成功');
              let arr2 =
                [new MyData(),
                  new MyData(),
                  new MyData(),
                  new MyData(),
                  new MyData()]
              this.controller.addAllData(arr2)
              if (this.index > 0) {
                this.controller.loadMoreEnd()
                Logger.info(`执行-- controller.loadMoreEnd() ${this.index}`)
              } else {
                this.index++
                this.controller.loadMoreComplete()
                Logger.info(`执行-- controller.loadMoreComplete() ${this.index}`)
              }
            }, 1000);
          });
        },
        // 刷新的回调
        onRefresh: () => {
          return new Promise<string>((resolve, reject) => {
            // 模拟网络请求操作
            setTimeout(() => {
              resolve('刷新成功');
              promptAction.showToast({ message: '刷新成功' })
              this.controller.setNewData(this.getData())
              this.controller.refreshFinish()
            }, 1000);
          });
        },
      })
        .height('100%')
        .layoutWeight(1)
        .margin({ top: 10 })

具体属性

controller 更新数据，以及设置加载和刷新的状态必传
listItem 每个Item的builder 必传
header 头部的builder，不传默认没有
footer 尾部的builder，不传默认没有
keyGenerator LazyForEach 的 keyGenerator key生成器，默认是 JSON.stringify(item)
cachedCount List，Grid，WaterFlow 的缓存个数cachedCount，默认是 1
loadMoreLastIndex 当滑动到倒数第N个是触发LoadMore，默认是1
isAppearLoadMore 一进来是否就触发LoadMore ，默认是false
onRefresh 刷新的回调 ,不传代表禁用刷新
onLoadMore 加载更多的回调 ,不传代表禁用加载更多

List 独有

space （List）每一行的间距

Grid和WaterFlow特有

rowsGap: 10,
columnsGap: 10,
columnsTemplate: “1fr 1fr”,

LazyRefreshController

loadMoreComplete() 加载完成（注意不是加载结束，而是本次数据加载结束并且还有下页数据）
loadMoreFail() 加载更多失败
loadMoreEnd() 加载结束，不会再继续加载了，没有更多了
refreshFinish() 刷新完成
totalCount() 获取列表总个数
getData(index: number): T 返回当前的item
addData(data: T, index?: number) 根据index添加数据，默认在添加到最后
addAllData(data: Array) 添加一个数组
setNewData(data: Array) 设置一个全新的数据
deleteData(index: number): boolean 删除元素
moveData(from: number, to: number): boolean 移动数据
notifyItemChange(index: number, data: T): boolean 改变index位置的数据
notifyDataReload() 重新加载
notifyDatasetChange 变更数据

最后呢，很多开发朋友不知道需要学习那些鸿蒙技术？鸿蒙开发岗位需要掌握那些核心技术点？为此鸿蒙的开发学习必须要系统性的进行。

而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点

如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习路线图。