# ElfRefresh **Repository Path**: Duke_Bit/ElfRefresh ## Basic Information - **Project Name**: ElfRefresh - **Description**: HarmonyOS 上的超自由的 0侵入 刷新组件 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-03-12 - **Last Updated**: 2025-03-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 有没有公司招鸿蒙开发的啊，求职ing # ElfRefresh ## 简介 一款简单，高效的上拉下拉刷新组件，支持各种任意组件刷新。基本没有侵入性 - 支持List、Scroll、Swipe等滑动组件刷新加载； - 支持自动刷新功能； - 支持暂无更多数据； - 支持自定义Header和Footer； - 支持Web的刷新（目前体验不太好）； - 支持二楼功能； ## 功能演示 ![功能演示](https://gitee.com/Duke_Bit/ElfRefresh/raw/master/images/two_level_show.gif) ## 下载安装 ```` ohpm install @duke/elf-refresh ```` OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md) ## 使用说明 ### 简单示例 ```typescript import { ElfRefreshComponent } from '@duke/elf-refresh'; import { TitleBar } from '../components/TitleBar'; @Entry @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 | 方法名 | 入参 | 接口描述 | |:--------------------|:-----------------------|:----------------------------------------------------------| | content | builderFunction | 内容区 | | custom | ElfCustomHeaderFooter | 自定义HeaderFooter 插槽 | | refreshConfigurator | ElfRefreshConfigurator | 组件配置 | | controller | ElfRefreshController | 自动刷新控制和无更多数据控制 | | childOffsetInput | number | 对于非滑动组件又有滑动手势的组件提供解决滑动冲突的方案（如Web组件） 大于0则刷新不响应 注意该属性仅对刷新生效 | | isSmartFind | boolean | 智能寻找刷新控件 默认开启，负责嵌套建议关闭，手动指定刷新组件 | | interceptNestScroll | boolean | 拦截嵌套滑动刷新 默认关闭 | | targetRefreshId | string | 内容区存在嵌套滑动的情况，提供主内容id，解决滑动冲突的情况 | | onRefresh | () => Promise | 返回值为true则刷新成功，false则刷新失败 | | onLoadMore | () => Promise | 返回值为true则加载成功，false则加载失败 | ### ElfGlobalConfig | 方法名 | 入参 | 说明 | |:----------------------:|:--------------------------------------------:|:-------------------------------:| | initGlobalConfig | ElfCustomHeaderFooter,ElfRefreshConfigurator | 全局配置，配置全局刷新组件的默认配置，默认配置会覆盖组件的配置 | | getDefaultCustom | | 获取全局Header和Footer组件 | | getDefaultConfigurator | | 获取全局刷新组件的默认配置 | ### ElfRefreshConfigurator | 属性 | 功能描述描述 | |:---------------------------:|:----------------------------:| | hasRefresh | 是否具有下拉刷新功能 | | hasLoadMore | 是否具有上拉加载功能 | | maxTranslate | 下拉刷新距离 | | closeTwoOffset | 关闭二楼高度，支持百分比和calc函数，以二楼高度为基准 | | sensitivity | 下拉上拉灵敏度 | | animDuration | 滑动结束后，回弹动画执行时间 | | refreshHeight | 下拉组件高度 | | loadHeight | 上拉组件高度 | | twoLevelHeight | 二楼高度支持百分比和calc函数 | | refreshAnimDuration | 自动下拉动画执行一次的时间 | | refreshCompleteTextHoldTime | 下拉刷新完毕后, 刷新成功文本停留的时间 | | headerStyle | 头部样式 | | footerStyle | 底部样式 | | copyWith | 拷贝配置并更新配置 | ## 自定义HeaderFooter ### ElfRefreshHeader | 属性/回调 | 类型 | 说明 | |------------------|--------------------------------|-----------------------------| | **maxTranslate** | `number` | 最大平移距离（控制下拉最大位移） | | **height** | `number` | 容器高度基准值 | | **state** | `RefreshState` | 当前刷新状态（关联枚举类型 RefreshState） | | **percent** | `number` | 下拉进度百分比（计算值：offset/height） | | **offset** | `number` | 实时下拉位移量 | | **onMoving** | `() => void` | 手指持续拖动时触发 | | **onReleased** | `() => void` | 手指释放屏幕时触发 | | **onStart** | `() => void` | 刷新动画开始时触发 | | **onFinish** | `(isSuccess: boolean) => void` | 刷新完成时触发（带成功状态） | ### ElfRefreshFooter | 属性/回调 | 类型 | 说明 | |------------------|--------------------------------|-----------------------------| | **maxTranslate** | `number` | 最大平移距离（控制下拉最大位移） | | **height** | `number` | 容器高度基准值 | | **state** | `RefreshState` | 当前刷新状态（关联枚举类型 RefreshState） | | **percent** | `number` | 下拉进度百分比（计算值：offset/height） | | **offset** | `number` | 实时下拉位移量 | | **hasMore** | `boolean` | 是否可以继续加载 | | | **onMoving** | `() => void` | 手指持续拖动时触发 | | **onReleased** | `() => void` | 手指释放屏幕时触发 | | **onStart** | `() => void` | 刷新动画开始时触发 | | **onFinish** | `(isSuccess: boolean) => void` | 刷新完成时触发（带成功状态） | ## 二楼使用 查看下面Demo [页面](https://gitee.com/Duke_Bit/ElfRefresh/blob/master/entry/src/main/ets/pages/TwoPage.ets) [二楼组件](https://gitee.com/Duke_Bit/ElfRefresh/blob/master/entry/src/main/ets/components/CustomHeader.ets) ## 约束与限制 在下述版本验证通过： 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](https://gitee.com/Duke_Bit/ElfRefresh/issues) 给我，当然，我也非常欢迎你给我发 [PR](https://gitee.com/Duke_Bit/ElfRefresh) 。 ## 开源协议 本项目基于 [MIT license](https://gitee.com/Duke_Bit/ElfRefresh/blob/master/LICENSE) ，请自由地享受和参与开源。