介绍

一款OpenHarmony环境下可用的下拉刷新、上拉加载组件

特性

• 🚀 支持设置内置动画的各种属性

• 💡 支持设置自定义动画

• 🛠️ 支持lazyForEach的数据作为数据源

软件架构

架构图

源码目录

├─AppScope
├─doc
├─entry
│  └─src
│      └─main
│          ├─cangjie
│          └─resources
├─smartrefresh
│  └─src
│      └─main
│          ├─cangjie
│          │  └─src
│          │      ├─toprefresh
│          │      └─utils
│          └─resources
└─hvigor

• AppScope 全局资源存放目录和应用全局信息配置目录
• doc API文档和使用手册存放目录
• entry 工程模块 - 编译生成一个HAP
• entry src APP代码目录
• entry src main APP项目目录
• entry src main cangjie 仓颉代码目录
• entry src main resources 资源文件目录
• smartrefresh 工程模块 - 编译生成一个har包
• smartrefresh src 模块代码目录
• smartrefresh src main 模块项目目录
• smartrefresh src main cangjie 仓颉代码目录
• smartrefresh src main resources 资源文件目录
• smartrefresh src main cangjie src toprefresh 组件目录
• smartrefresh src main cangjie src utils 通用方法和枚举类目录
• hvigor 构建工具目录

接口说明

主要类和函数接口说明详见 API

使用说明

编译构建

通过module引入

1. 克隆下载项目
2. 将 smartrefresh 模块拷贝到应用项目下
3. 修改自身应用 entry 下的 oh-package.json5 文件，在 dependencies 字段添加 "smartrefresh": "file:../smartrefresh"

{
    "name": "entry",
    "version": "1.0.0",
    "description": "Please describe the basic information.",
    "main": "",
    "author": "",
    "license": "",
    "dependencies": {
      "smartrefresh": "file:../smartrefresh"
    }
}

4. 修改自身应用 entry/src/main/cangjie 下的 cjpm.toml 文件，在 [dependencies] 字段下添加 smartrefresh = {path = "../../../../smartrefresh/src/main/cangjie", version = "1.0.0"}

[dependencies]
  smartrefresh = {path = "../../../../smartrefresh/src/main/cangjie", version = "1.0.0"}

5. 在项目中引用

import smartrefresh.toprefresh.*

功能示例

下拉刷新和上拉加载 Classics 样式示例

import ohos.base.*
import ohos.component.*
import ohos.state_manage.*
import ohos.state_macro_manage.*
import smartrefresh.toprefresh.*

@Entry
@Component
public class ClassicsSample {
    // 创建组件控制器对象
    @State var refreshModel: SmartRefreshModel = SmartRefreshModel()
    
    // 创建头部组件
    @Builder
    func testHeader() {
        /**
         * Classics样式头部组件
         *
         * @param model 组件控制器对象
         * @param pullRefreshImage 要显示的图片资源
         */
        Classics(model: refreshModel, pullRefreshImage: @r(app.media.classicsRefreshing))
    }
    
    // 要添加下拉刷新/上拉加载功能的组件
    @Builder
    func testMain() {
        Column() {
            ForEach(
                this.arr,
                itemGeneratorFunc: {
                    item: String, idx: Int64 => Button(item).width(100.percent).height(100).margin(10)
                }
            )
        }.width(100.percent).padding(20.lpx)
    }
    
    // 创建尾部组件
    @Builder
    func testFooter() { }
    
    // 添加 SmartRefresh 自定义组件
    func build() {
        Column() {
            /**
             * SmartRefresh 自定义组件
             *
             * @param model 组件控制器对象
             * @param header 头部组件 需使用@Builder修饰
             * @param mainContent 列表主体 需使用@Builder修饰
             * @param footer 尾部组件 需使用@Builder修饰
             */
            SmartRefresh(model: refreshModel, header: testHeader, mainContent: testMain, footer: testFooter)
        }.backgroundColor(0xdddddd)
    }
}

显示控制

// 设置刷新时显示时间信息
model.setTimeShowState(true)

// 设置刷新时不显示时间信息
model.setTimeShowState(false)

// 设置头部组件背景颜色
model.setBackgroundShadowColor(Color.BLUE)

显示效果

约束与限制

在下述版本验证通过：

DevEco Studio: 5.0.3.700

Cangjie support Plugin: 5.0.3.700

开源协议

本项目基于 Apache License 2.0 License，请自由的享受和参与开源。

参与贡献

欢迎给我们提交PR，欢迎给我们提交Issue，欢迎参与任何形式的贡献。