Harmony OS——Refresh

最新推荐文章于 2025-04-14 23:00:27 发布

hyem

最新推荐文章于 2025-04-14 23:00:27 发布

阅读量1k

点赞数 23

文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/2301_79654063/article/details/143274962

版权

Refresh

基于ArkUI封装的上拉下拉刷新组件，支持列表、网格、瀑布流、支持各种任意组件刷新，支持侧滑删除、条目吸顶，下滑二楼等功能。

1、支持ListView列表/下拉刷新/上拉加载
2、支持GridView网格列表/下拉刷新/上拉加载
3、支持StaggeredGridView瀑布流列表/下拉刷新/上拉加载
4、支持自定义刷新头和加载尾
5、支持列表(ListView/GridView/StaggeredGridView)添加头组件
6、支持列表(ListView)侧滑展示按钮，左右均可
7、支持下滑进入二楼/半楼功能（仿京东或淘宝）
8、数据操作（增删改查）提供便捷方式，适应更多场景运用
9、支持页面刷新加载吸顶效果(ListView/GridView/StaggeredGridView)
10、支持默认进入页面自动刷新/手动刷新
11、支持内部缺省页设置（空布局/错误布局）
12、支持ListView条目分组吸顶效果
13、默认刷新头支持三个点旋转效果
14、ListView支持滑动直接删除

使用方法

在使用的模块路径下进行执行命令。

ohpm install @abner/refresh

代码使用

目前提供了多种种用法，一种是ListView形式，就是单列表形式，一种是GridView形式，也就是网格列表形式，一种是StaggeredGridView形式，也就是瀑布流形式，还有一种就是RefreshLayout形式，支持任何的组件形式，比如Column，Row等等。

目前默认情况下是懒加载数据模式。

需要注意：默认列表是没有高度的，如果你要实现定位或者获取滑动位置，必须要设置高度,100%或者其它，目前上拉加载是带有缩回的，如果你要直接加载数据，需设置slideDisplayLoadData为true，关于禁止阻尼效果，isScrollSpring为false即可。

1、ListView

1、懒加载数据使用（LazyForEach）

需要使用RefreshDataSource进行数据的增删改查！


controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量
dataSource: RefreshDataSource = new RefreshDataSource()//数据懒加载操作对象，执行数据增删改查

ListView({
  lazyDataSource: this.dataSource,
  itemLayout: (item, index) => this.itemLayout(item, index), //条目布局
  controller: this.controller, //控制器，负责关闭下拉和上拉
  onRefresh: () => {
    //下拉刷新
    //数据懒加载使用：
    //0、数据初始化，this.dataSource.initData()
    // 1、数组数据添加，this.dataSource.pushDataArray()，
    // 2、单个数据添加，this.dataSource.pushData()
    this.controller.finishRefresh() //关闭下拉刷新，在数据请求回后进行关闭
  },
  onLoadMore: () => {
    //上拉加载
    //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()
    this.controller.finishLoadMore() //关闭上拉加载,在数据请求回后进行关闭
  }
})
/**
 * Author:AbnerMing
 * Describe:条目布局
 * @param item  数据对象
 * @param index  数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  //条目视图，任意组件
}

2、普通使用（ForEach）

普通使用正常的数据加载即可，只需关注数据源。


controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量

ListView({
  items: this.array, //数据源 数组,任意类型
  itemLayout: (item, index) => this.itemLayout(item, index),
  controller: this.controller, //控制器，负责关闭下拉和上拉
  isLazyData: false,//禁止懒加载，也就是使用ForEach进行数据加载
  onRefresh: () => {
    //下拉刷新
    this.controller.finishRefresh();
  },
  onLoadMore: () => {
    //上拉加载
    this.controller.finishLoadMore();
  }
})

/**
 * Author:AbnerMing
 * Describe:条目布局
 * @param item  数据对象
 * @param index  数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  //条目视图，任意组件
}

2、GridView【网格】

1、懒加载数据使用（LazyForEach）

需要使用RefreshDataSource进行数据的增删改查！


controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量
dataSource: RefreshDataSource = new RefreshDataSource()//数据懒加载操作对象，执行数据增删改查

GridView({
  lazyDataSource: this.dataSource,
  itemLayout: (item, index) => this.itemLayout(item, index), //条目布局
  controller: this.controller, //控制器，负责关闭下拉和上拉
  onRefresh: () => {
    //下拉刷新
    //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()
    this.controller.finishRefresh() //关闭下拉刷新，在数据请求回后进行关闭
  },
  onLoadMore: () => {
    //上拉加载
    //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()
    this.controller.finishLoadMore() //关闭上拉加载,在数据请求回后进行关闭
  }
})
/**
 * Author:AbnerMing
 * Describe:条目布局
 * @param item  数据对象
 * @param index  数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  //条目视图，任意组件
}

2、普通使用（ForEach）

普通使用正常的数据加载即可，只需关注数据源。


@State controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量

GridView({
        items: this.array, //数据源 数组,任意类型
        itemLayout: (item, index) => this.itemLayout(item, index),
        controller: this.controller, //控制器，负责关闭下拉和上拉
        isLazyData: false,//禁止懒加载，也就是使用ForEach进行数据加载
        onRefresh: () => {
          //下拉刷新
          this.controller.finishRefresh();
        },
        onLoadMore: () => {
          //上拉加载
          this.controller.finishLoadMore();
        }
      })

/**
 * Author:AbnerMing
 * Describe:条目布局
 * @param item  数据对象
 * @param index  数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  //条目视图，任意组件
}

3、StaggeredGridView【瀑布流】

1、懒加载数据使用（LazyForEach）

需要使用RefreshDataSource进行数据的增删改查！


controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量
dataSource: RefreshDataSource = new RefreshDataSource()//数据懒加载操作对象，执行数据增删改查

StaggeredGridView({
  lazyDataSource: this.dataSource,
  itemLayout: (item, index) => this.itemLayout(item, index), //条目布局
  controller: this.controller, //控制器，负责关闭下拉和上拉
  onRefresh: () => {
    //下拉刷新
    //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()
    this.controller.finishRefresh() //关闭下拉刷新，在数据请求回后进行关闭
  },
  onLoadMore: () => {
    //上拉加载
    //数据懒加载使用：1、数组数据添加，this.dataSource.pushDataArray()，2、单个数据添加，this.dataSource.pushData()
    this.controller.finishLoadMore() //关闭上拉加载,在数据请求回后进行关闭
  }
})
/**
 * Author:AbnerMing
 * Describe:条目布局
 * @param item  数据对象
 * @param index  数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  //条目视图，任意组件
}

2、普通使用（ForEach）

普通使用正常的数据加载即可，只需关注数据源。


@State controller: RefreshController = new RefreshController() //刷新控制器，声明全局变量

StaggeredGridView({
        items: this.array, //数据源 数组,任意类型
        itemLayout: (item, index) => this.itemLayout(item, index),
        controller: this.controller, //控制器，负责关闭下拉和上拉
        isLazyData: false,//禁止懒加载，也就是使用ForEach进行数据加载
        onRefresh: () => {
          //下拉刷新
          this.controller.finishRefresh();
        },
        onLoadMore: () => {
          //上拉加载
          this.controller.finishLoadMore();
        }
      })

/**
 * Author:AbnerMing
 * Describe:条目布局
 * @param item  数据对象
 * @param index  数据索引
 */
@Builder
itemLayout(item: Object, index: number): void {
  //条目视图，任意组件
}