# HarmonyOsRefresh **Repository Path**: abnercode/harmony-os-refresh ## Basic Information - **Project Name**: HarmonyOsRefresh - **Description**: 基于ArkUI封装的上拉下拉刷新组件，支持ListView、GridView，支持各种任意组件刷新。 - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 14 - **Forks**: 7 - **Created**: 2024-01-25 - **Last Updated**: 2024-12-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 介绍

此项目不在giee维护，于2024年4月20日转移至github，请注意！

此项目不在giee维护，于2024年4月20日转移至github，请注意！！

此项目不在giee维护，于2024年4月20日转移至github，请注意！！！

github地址

基于ArkUI封装的上拉下拉刷新组件，支持列表、网格、瀑布流、支持各种任意组件刷新。 **目前已经适配NEXT版本**，如果你是api9可查看api9分支。 ## 效果

动态效果：

## 开发环境 DevEco Studio NEXT Developer Preview1,Build Version: 4.1.3.500 Api版本：**11** hvigorVersion：4.0.2 ## 快速使用 有多种使用方式，比如远程依赖、本地静态共享包依赖,源码方式依赖，推荐使用**远程依赖**，方便快捷，有最新修改可以及时生效。 ### 1、远程依赖方式使用【推荐】 方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。 ``` ohpm install @abner/refresh ``` 方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下： 如果你是api9版本，可以使用1.0.0版本。 ``` "dependencies": { "@abner/refresh": "^1.0.1"} ```

### 2、本地静态共享包har包使用

首先，下载har包，点击下载

下载之后，把har包复制项目中，目录自己创建，如下，我创建了一个libs目录，复制进去

引入之后，进行同步项目，点击Sync Now即可，当然了你也可以，将鼠标放置在报错处会出现提示，在提示框中点击Run 'ohpm install'。

需要注意，@abner/refresh，是用来区分目录的，可以自己定义，比如@aa/bb等，关于静态共享包的创建和使用，请查看如下我的介绍，这里就不过多介绍

[HarmonyOS开发：走进静态共享包的依赖与使用](https://juejin.cn/post/7274982412245876776) ### 查看是否引用成功 无论使用哪种方式进行依赖，最终都会在使用的模块中，生成一个oh_modules文件，并创建源代码文件，有则成功，无则失败，如下：

## 代码使用 目前提供了多种用法，比如列表ListView、网格GridView、瀑布流StaggeredGridView，还有一种就是RefreshLayout形式，支持任何的组件形式，比如Column，Row等等。 大家可以在源码中查看相关案例，有详细的代码。 ### ListView ```typescript ListView({ items: this.array, //数据源 数组 itemLayout: (item, index) => this.itemLayout(item, index), //条目布局 controller: this.controller, //控制器，负责关闭下拉和上拉 onRefresh: () => { //下拉刷新 this.controller.finishRefresh() }, onLoadMore: () => { //上拉加载 this.controller.finishLoadMore() } }) ``` #### 相关属性介绍 | 属性 | 类型 | 概述 | |-------------------|--------------|-------------------| | listAttribute | ListAttr | ListView的相关属性 | | listItemAttribute | ListItemAttr | ListView的Item相关属性 | ##### ListAttr | 属性 | 类型 | 概述 | |-----------------|---------------|-----------------------------------| | width | Length | 宽度 | | height | Length | 高度 | | backgroundColor | ResourceColor | 背景颜色，默认透明 | | listDirection | Axis | 设置List组件排列方向。默认值：Axis.Vertical | | divider | 对象 | 设置ListItem分割线样式，默认无分割线。 | | scrollBar | BarState | 设置滚动条状态 | | cachedCount | number | 设置列表中ListItem/ListItemGroup的预加载数量 | | edgeEffect | EdgeEffect | 设置组件的滑动效果 | ##### ListItemAttr | 属性 | 类型 | 概述 | |-----------------|---------------|-----------| | width | Length | 宽度 | | height | Length | 高度 | | backgroundColor | ResourceColor | 背景颜色，默认透明 | | onClick | 回调方法 | 点击事件 | ### GridView ```typescript GridView({ items: this.array, //数据源 数组 itemLayout: (item, index) => this.itemLayout(item, index), //条目布局 controller: this.controller, //控制器，负责关闭下拉和上拉 onRefresh: () => { //下拉刷新 this.controller.finishRefresh() //关闭下拉刷新 }, onLoadMore: () => { //上拉加载 this.controller.finishLoadMore() //关闭上拉加载 } }) ``` #### 相关属性介绍 | 属性 | 类型 | 概述 | |-------------------|--------------|-------------------| | gridAttribute | GridAttr | GridView相关属性 | | gridItemAttribute | GridItemAttr | GridView的Item相关属性 | ##### GridAttr | 属性 | 类型 | 概述 | |-----------------|-------------------------|-------------------------------------| | width | Length | 宽度 | | height | Length | 高度 | | backgroundColor | ResourceColor | 背景颜色，默认透明 | | columnsTemplate | string | 设置当前网格布局列的数量，不设置时默认2列 | | rowsTemplate | string | 设置当前网格布局行的数量，不设置时默认1行。 | | columnsGap | Length | 设置列与列的间距。默认值：0 | | rowsGap | Length | 设置行与行的间距。默认值：0 | | scrollBar | BarState | 设置滚动条状态。默认值：BarState.Off | | scrollBarColor | string / number / Color | 设置滚动条的颜色。 | | scrollBarWidth | string / number / | 设置滚动条的宽度。 | | cachedCount | number | 设置预加载的GridItem的数量，只在LazyForEach中生效。 | ##### GridItemAttr | 属性 | 类型 | 概述 | |-----------------|------------------|-----------| | width | Length | 宽度 | | height | Length | 高度 | | margin | Margin / Length | 边距 | | padding | Padding / Length | 内边距 | | backgroundColor | ResourceColor | 背景颜色，默认透明 | | onClick | 回调方法 | 点击事件 | ### StaggeredGridView ```typescript StaggeredGridView({ items: this.array, //数据源 itemLayout: (item: UnionData, index: number) => this.itemLayout(item, index), //条目布局 controller: this.controller, //控制器，负责关闭下拉和上拉 onRefresh: () => { //下拉刷新 this.controller.finishRefresh() }, onLoadMore: () => { //上拉加载 this.controller.finishLoadMore() } }) ``` #### 相关属性介绍 | 属性 | 类型 | 概述 | |-----------------|---------------|-------------| | columnsTemplate | string | 展示几列，默认是两列 | | columnsGap | Length | 列与列的间距，默认为0 | | rowsGap | Length | 行与行的间距 | | bgColor | ResourceColor | 整体的背景 | | sWidth | Length | 宽度 | | sHeight | Length | 高度 | #### RefreshLayout ```typescript RefreshLayout ( { controller: this.controller, onRefresh: () => { this.controller.finishRefresh() } , onLoadMore: () => { this.controller.finishLoadMore() } } ) { //可以是任何的组件 Column() { Text("我是测试数据") } . width("100%") .height("100%") .backgroundColor(Color.Pink) .justifyContent(FlexAlign.Center) } ``` #### 更多案例 可以查看相关Demo #### 常见问题 如果你打算下载源码使用，并且你的开发环境比较低，会造成，运行工程失败问题，常见错误如下，是因为开发环境不一致造成。

**您可以选择解决问题，解决方式如下：** [解决DevEco Studio低版本导入高版本项目运行失败问题](https://juejin.cn/post/7280746811328692258) 您也可以不运行，直接进行使用，完全没有问题。 ### License ``` Copyright (C) AbnerMing, HarmonyOsRefresh Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ```