一款简单，高效的上拉下拉刷新组件，支持各种任意组件刷新。基本没有侵入性
- 支持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';
@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%')
}
}| 方法名 | 入参 | 接口描述 |
|---|---|---|
| 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则加载失败 |
| 方法名 | 入参 | 说明 |
|---|---|---|
| initGlobalConfig | ElfCustomHeaderFooter,ElfRefreshConfigurator | 全局配置，配置全局刷新组件的默认配置，默认配置会覆盖组件的配置 |
| getDefaultCustom | 获取全局Header和Footer组件 | |
| getDefaultConfigurator | 获取全局刷新组件的默认配置 |
| 属性 | 功能描述描述 |
|---|---|
| hasRefresh | 是否具有下拉刷新功能 |
| hasLoadMore | 是否具有上拉加载功能 |
| hasAutoLoadMore | 是否自动加载更多 |
| maxTranslate | 下拉刷新距离 |
| closeTwoOffset | 关闭二楼高度，支持百分比和calc函数，以二楼高度为基准 |
| sensitivity | 下拉上拉灵敏度 |
| animDuration | 滑动结束后，回弹动画执行时间 |
| refreshHeight | 下拉组件高度 |
| loadHeight | 上拉组件高度 |
| twoLevelHeight | 二楼高度支持百分比和calc函数 |
| refreshAnimDuration | 自动下拉动画执行一次的时间 |
| refreshCompleteTextHoldTime | 下拉刷新完毕后, 刷新成功文本停留的时间 |
| headerStyle | 头部样式 |
| footerStyle | 底部样式 |
| copyWith | 拷贝配置并更新配置 |
| 属性/回调 | 类型 | 说明 |
|---|---|---|
| maxTranslate | number |
最大平移距离（控制下拉最大位移） |
| height | number |
容器高度基准值 |
| state | RefreshState |
当前刷新状态（关联枚举类型 RefreshState） |
| percent | number |
下拉进度百分比（计算值：offset/height） |
| offset | number |
实时下拉位移量 |
| onMoving | () => void |
手指持续拖动时触发 |
| onReleased | () => void |
手指释放屏幕时触发 |
| onStart | () => void |
刷新动画开始时触发 |
| onFinish | (isSuccess: boolean) => void |
刷新完成时触发（带成功状态） |
| 属性/回调 | 类型 | 说明 |
|---|---|---|
| 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
在下述版本验证通过：
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 ，请自由地享受和参与开源。
- @duke/leak-canary 实时检测 ArkTS 对象内存泄漏: https://gitee.com/Duke_Bit/leak-canary
- eventpost 事件分发，支持组件中的lifecycle，在组件中使用自动取消订阅: https://gitee.com/Duke_Bit/eventpost
- @duke/view-model 鸿蒙版本的Lifecycle库，支持组件、Router和Navigation: https://gitee.com/Duke_Bit/view-model
- @duke/logan-ext Logan扩展库，方便开箱即用: https://gitee.com/Duke_Bit/logan
- @duke/logan Logan是一个为OpenHarmony开发的日志库，对美团技术团队的Logan的鸿蒙化移植版本: https://gitee.com/Duke_Bit/logan
- @duke/websocket-client WebSocket库解决官方API的一些bug问题: https://gitee.com/Duke_Bit/websocket
- @duke/component-lifecycle 鸿蒙版本的Lifecycle库，支持组件、Router和Navigation: https://gitee.com/Duke_Bit/component-lifecycle
- @duke/elf-dialog CustomDialog黑魔法 不依赖promptAction 实现的函数级弹窗，省去复杂的模版代码，让你专注于你的业务，一行代码搞定弹窗: https://gitee.com/Duke_Bit/elf-dialog