鸿蒙-加载中，加载失败，空数据的封装

LoadContent

HarmonyOS 中 是一个易用，扩展性良好的加载反馈页管理框架，在加载网络或其他数据时候，根据需求切换状态页面， 加载中，加载失败，空数据，加载成功之后的内容数据，封装使用效果更佳。

先上图

开始使用

ohpm install @nzy/load_content

使用说明

引入

import { LoadContent, LoadController } from '@nzy/load-content';

使用

初始化 LoadController ，绑定 reTryClick ，重试事件

// 初始化 LoadController
controller: LoadController = new LoadController()
xxx
Column() {
      ComposeTitleBar()
      LoadContent({
        controller: this.controller,
        reTryClick: () => {
          this.retry()
        }
      }) {
        Text('我是内容').fontSize(50)
        Text('我是内容2').fontSize(50)
      }
    }
    .width('100%')
    .height('100%')

LoadController 其他API

• 呈现加载中 LoadController.showLoading()
• 网络错误 LoadController.showError()
• 空数据 LoadController..showEmpty()
• 内容 LoadController..showContent()

export class LoadController {
  showError(netErrorConfig?: NetErrorConfig) {
    this.errorEvent(netErrorConfig)
  }

  showEmpty(netEmptyConfig?: NetEmptyConfig) {
    this.emptyEvent(netEmptyConfig)
  }

  showContent() {
    this.contentEvent()
  }

  showLoading(netLoadConfig?: NetLoadConfig) {
    this.loadingEvent(netLoadConfig)
  }
}

配置

在 EntryAbility 初始化

• 可以使用默认样式，不用初始化
• 可以自定义加载的样式，可以在 EntryAbility 中自定义全局的样式

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage): void {
    this.initLoad()
    windowStage.loadContent('pages/Index');
  }

  initLoad() {
    LoadConfig.init(
      {
        image: $r('app.media.icon_net_error'), // 加载失败的icon
        imageWidth: 100, // 加载失败的icon的宽度，高度则默认适配
        content: '网络错误，请重试', // 加载失败的文案
        contentColor: "#ff666666", // 加载失败的文案的字体颜色
        contentFontSize: 16, // 加载失败的文案的字体大小
        contentMartinTop: 10, // 加载失败的文案距离图片的间隔
        buttonContent: '刷新', // 加载失败的按钮的文本
        buttonWidth: 200, // 加载失败的按钮的宽度
        buttonFontSize: 16, // 加载失败的按钮的文本大小
        buttonFontColor: "#ff666666", // 加载失败的按钮的文本字体颜色
        buttonBorderRadius: 5, // 加载失败的按钮的边框Radius
        buttonBorderColor: "#454545", // 加载失败的按钮的边框颜色
        buttonBorderWidth: 1, // 加载失败的按钮的边框宽度
        buttonMartinTop: 20, // 加载失败的按钮 和 文案的间隔
        buttonBackgroundColor: Color.Transparent, // 加载失败的按钮的背景颜色
      },
      {
        image: $r('app.media.icon_net_empty'), // 空数据的icon
        imageWidth: 100, // 空数据icon的宽度，高度自适应
        content: '暂无数据', // 空数据的文案
        contentColor: "#ff666666", // 空数据文案的颜色
        contentFontSize: 16, // 空数据文案的字体大小
        contentMartinTop: 10, // 空数据文案和icon的间隔
      },
      {
        loadingProgressWidth: 50, // 加载 LoadingProgress 的宽度
        loadingProgressColor: "#ff666666", // 加载 LoadingProgress 的颜色
        content: '数据加载中', // 加载的文案
        contentColor: "#ff666666", // 加载文案的颜色
        contentFontSize: 16, // 加载文案字体的大小
        contentMartinTop: 10, // 加载文案和icon的间隔
      })
  }
}

在变化状态的时候更新 内容

比如要更改某个组件中的样式的时候，只更改设置的数据，其他数据以 LoadConfig.init() 为主，

this.controller.showError({buttonContent:"数据出错喽，请点击重试"})
this.controller.showLoading({content:"数据正在快马加鞭的来了"})
this.controller.showEmpty({content:"不好意思，没有数据哟"})

NetErrorConfig

属性	类型	描述
image	ResourceStr	加载失败的icon
imageWidth	Length	加载失败的icon的宽度
content	string ， Resource	加载失败的文案
contentColor	ResourceColor	加载失败的文案的字体颜色
contentFontSize	number，string， Resource	加载失败的文案的字体大小
contentMartinTop	Length	加载失败的文案距离图片的间隔
buttonContent	string , Resource	加载失败的按钮的文本
buttonWidth	Length	加载失败的按钮的文本宽度
buttonFontSize	number，string， Resource	加载失败的按钮的文本大小
buttonFontColor	ResourceColor	加载失败的按钮的文本字体颜色
buttonBorderRadius	Length	加载失败的按钮的边框Radius
buttonBorderColor	ResourceColor	加载失败的按钮的边框颜色
buttonBorderWidth	Length	加载失败的按钮的边框宽度
buttonMartinTop	Length	加载失败的按钮 和 文案的间隔
buttonBackgroundColor	ResourceColor	加载失败的按钮的背景颜色

NetEmptyConfig

属性	类型	描述
image	ResourceStr	空数据的icon
imageWidth	Length	空数据icon的宽度
content	string ， Resource	空数据的文案
contentColor	ResourceColor	空数据文案的颜色
contentFontSize	number，string， Resource	空数据文案的字体大小
contentMartinTop	Length	空数据文案和icon的间隔

LoadConfig

属性	类型	描述
loadingProgressWidth	Length	加载 LoadingProgress 的宽度
loadingProgressColor	ResourceColor	加载 LoadingProgress 的颜色
content	string ， Resource	加载的文案
contentColor	ResourceColor	加载文案的颜色
contentFontSize	number，string， Resource	加载文案字体的大小
contentMartinTop	Length	加载文案和icon的间隔

地址

gitee