鸿蒙-下拉刷新、上拉加载更多的 LazyRefresh

自定义组件 LazyRefresh

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

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

上图

list	grid	waterflow

支持功能

• 支持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 变更数据

贡献代码

使用过程中发现任何问题都可以提 Issue。 给我们，当然，我们也非常欢迎你给我们发 PR 。

后续计划

增加自定义刷新的Builder和加载更多的Builder

其他文章

源码地址