鸿蒙HarmonyOS三方库刷新控件refresh的接入和使用

本文介绍一下鸿蒙项目中三方库刷新控件refresh的接入和使用方式

刷新截图

一、引入三方控件 refresh

使用鸿蒙开发工具DevEco Studio 打开项目后，在底部控制台的 Terminal中执行命令：

ohpm install @abner/refresh

输出以下信息则表示引入成功：

└─[0] <git:(main ba34beb✱) > ohpm install @abner/refresh
ohpm INFO: MetaDataFetcher fetching meta info of package '@abner/refresh' from https://ohpm.openharmony.cn/ohpm/
ohpm INFO: fetch meta info of package '@abner/refresh' success https://ohpm.openharmony.cn/ohpm/@abner/refresh
install completed in 0s 177ms

在 oh-package.json5 会自动引入具体的版本信息：

"dependencies": {
  "@abner/refresh": "^1.3.7"
},

在 oh-package-lock.json5 中会有更详细的引入信息：

{
  "meta": {
    "stableOrder": true
  },
  "lockfileVersion": 3,
  "ATTENTION": "THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.",
  "specifiers": {
    "@abner/refresh@^1.3.7": "@abner/refresh@1.3.7"
  },
  "packages": {
    "@abner/refresh@1.3.7": {
      "name": "@abner/refresh",
      "version": "1.3.7",
      "integrity": "sha512-Dkr/ZjZmEtGmJIqBhrreg9OImk+QzERPN1Qa1R89PxZilheTY2oBf7r9anEmd5aHu++f5Y4JiGlcZwrg/d9Wtw==",
      "resolved": "https://ohpm.openharmony.cn/ohpm/@abner/refresh/-/refresh-1.3.7.har",
      "registryType": "ohpm"
    }
  }
}

二、refresh代码使用

在需要刷新的page页面引入头文件

import { ListView, RefreshController, RefreshLayoutStatusModel, LoadMoreLayoutStatusModel } from '@abner/refresh'

声明一个刷新的控制器

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

在要刷新的地方添加refresh自带的刷新控件 ListView（即将系统的滑动控件，比如列表控件List、网格控件Grid等替换成 refresh自带的列表ListView、 网格GridView、瀑布流StaggeredGridView等控件），同时去设置以下信息：

• items：【数据源】如果是纯列表，可以将请求获取的列表数据赋值到items（比如items: this.sourceArray），并在下一个参数itemLayout中去获取每一个item的信息。如果滑动列表包括一些头header，比如 header中有banner要跟着一起滑动，这时候可以将items设置成[1]，具体到itemLayout里面就可以使用全部自定义page了。
• itemLayout：自定义每个item。如果items是列表数据源，则 itemLayout 中只需要自定义每个item信息即可。如果将items设置成[1]，则itemLayout可以自定义整个List视图。
• controller：即声明的刷新控制器 controller: RefreshController。
• onRefresh：下拉刷新的回调方法。
• onLoadMore：上拉加载的回调方法。
• headerRefreshLayout：自定义的刷新header。不写即使用默认的刷新header。
• footerLoadLayout：自定义刷新footer。不写即使用默认的刷新footer。

相关代码：

ListView({
  items: [1], //数据源 数组,任意类型
  itemLayout: (item, index) => this.itemLayout(item, index), //条目布局
  controller: this.controller, //控制器，负责关闭下拉和上拉
  isLazyData: false,//禁止懒加载，也就是使用ForEach进行数据加载
  headerRefreshLayout:(model: RefreshLayoutStatusModel) => this.refreshHeader(model),
  footerLoadLayout:(model: LoadMoreLayoutStatusModel) => this.loadFooter(model),
  onRefresh: () => {
    //下拉刷新
    this.loadRequestData()
  },
  onLoadMore: () => {
    //上拉加载
    this.loadRequestData()
  }
})
  .width('100%')
  .height('100%')

自定义的 itemLayout

@Builder
itemLayout(item: Object, index: number): void {
  // 列表
  List() {
    ListItemGroup({
      header:this.CustomHeader
    })
    ForEach(this.infoListArray, (item:QQInfoListFeedsInfo, index) => {
      ListItem() {
        // 列表item
        QQInfoItemPage({
          body:item.feedNews?.body,
          footer:item.feedNews?.footer
        })
          .backgroundColor(Color.White)
      }
      .width('100%')
      .height(100)
      .onClick(() => {
        router.pushUrl({
          url:'common/webview/QQWebviewController',
          params:{
            url:''
          }
        })
      })
    })
  }
  .width('100%')
  .height('100%')

自定义刷新header和footer

只需要在ListView 中实现自定义的header和footer即可。即 headerRefreshLayout 和 footerLoadLayout。

headerRefreshLayout:(model: RefreshLayoutStatusModel) => this.refreshHeader(model),
footerLoadLayout:(model: LoadMoreLayoutStatusModel) => this.loadFooter(model),

自定义的header和footer：

@Builder
refreshHeader(model: RefreshLayoutStatusModel): void {
  Text("refreshHeader 当前状态：" + model.status)
    .width("100%")
    .textAlign(TextAlign.Center)
    .height(80)
    .backgroundColor(Color.Pink)
}

@Builder
loadFooter(model: LoadMoreLayoutStatusModel) {
  Text("loadFooter 当前状态：" + model.status)
    .width("100%")
    .textAlign(TextAlign.Center)
    .height(80)
    .backgroundColor(Color.Pink)
}

在网络请求结束的地方加上结束刷新的方法：

// 结束刷新
this.controller.finishRefresh() //关闭下拉刷新，在数据请求回后进行关闭
this.controller.finishLoadMore() //关闭上拉加载,在数据请求回后进行关闭

---

项目源码：HMApp_ArkTS
原文参考：abner/refresh(V1.3.7)