分享一个好用的HarmonyOS鸿蒙Next下拉刷新上拉加载组件

有没有公司招鸿蒙开发的啊，求职ing

ElfRefresh

简介

一款简单，高效的上拉下拉刷新组件，支持各种任意组件刷新。基本没有侵入性

• 支持List、Scroll、Swipe等滑动组件刷新加载；
• 支持自动刷新功能；
• 支持暂无更多数据；
• 支持自定义Header和Footer；
• 支持Web的刷新（目前体验不太好）；
• 支持二楼功能；

下载安装

ohpm install @duke/elf-refresh

OpenHarmony ohpm
环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

使用说明

简单示例

import { ElfRefreshComponent } from '@duke/elf-refresh'; 
import { TitleBar } from '../components/TitleBar';

@Component
struct ListPage { 
  @State data: string[] = [];
  aboutToAppear(): void { 
    for (let i = 0; i < 100; i++) { 
      this.data.push('item' + i); 
    } 
  }
  @Builder builderList() { 
    List() { 
      ForEach(this.data, (item: string) => {
        ListItem() { Text("测试数据" + item)
          .width("95%")
          .height(50)
          .margin(10)
          .textAlign(TextAlign.Center)
          .border({ width: 1, color: Color.Pink }) 
        } 
      }) 
    }
    .height('100%')
    .width('100%')
    //下面代码建议添加，添加了会让刷新更流畅
    .edgeEffect(EdgeEffect.None)
  }
  build() {
    Column() {
      TitleBar({ title: '普通List', })
      ElfRefreshComponent({ 
        content: () => { this.builderList() },
        onRefresh: async () => { 
          console.log('onRefresh');
          return true; },
        onLoadMore: async () => {
          console.log('onLoadMore');
          return true; } 
      }).layoutWeight(1) 
    }.height('100%')
    .width('100%') 
  } 
}

接口说明

ElfRefreshComponent

ElfGlobalConfig

ElfRefreshConfigurator

自定义HeaderFooter

ElfRefreshHeader

ElfRefreshFooter

二楼使用

查看下面Demo

页面
二楼组件

约束与限制

在下述版本验证通过：

DevEco Studio: 5.0.5.315, SDK: HarmonyOS 5.0.1 Release Ohos_sdk_public 5.0.1.115 (API Version 13 Release)

目录结构

|---- ElfRefresh
|     |---- AppScrope  # 示例代码文件夹
|     |---- entry  # 示例代码文件夹
|     |---- examples # 示例代码文件夹  
|     |---- library # ElfRefresh库文件夹  
|           |---- build  # ElfRefresh模块打包后的文件
|           |---- src/main/ets/compontens/ElfRefreshComponent.ets # ElfRefresh刷新组件
|           |---- index.ets  # 对外接口     
|     |---- README.md  # 安装使用方法
|     |---- CHANGELOG.md  # 更新日志

贡献代码

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

开源协议

本项目基于 MIT license ，请自由地享受和参与开源。