Empty 缺省页

概述

Empty 缺省页，页面的信息内容为空或信息响应异常的状态。

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "缺省页",
  "usingComponents": {
    "fui-empty":"/components/firstui/fui-empty/fui-empty"
  }
}

第二种：在根目录app.json文件中全局引入

"usingComponents": {
   "fui-empty":"components/firstui/fui-empty/fui-empty"
}

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 src 属性设置图标图片地址，title 属性设置提示信息标题。

<fui-empty src="/static/images/component/empty/img_news_3x.png" title="暂无新消息"></fui-empty>

带操作按钮

通过 descr 属性设置提示信息描述，fui-button 按钮为插槽内容。

<fui-empty src="{{resUrl}}/component/empty/img_data_3x.png" title="暂无数据" descr="功能开发中，敬请期待！">
  <fui-button text="返回首页" size="{{28}}" width="336rpx" height="84rpx" radius="100rpx" background="#fff" margin="64rpx 0" borderColor="#465CFF" color="#465CFF" bindclick="goIndex"></fui-button>
</fui-empty>

Slots

插槽名称	说明
default	标签内自定义内容

Props

属性名	类型	说明	默认值	其他说明
src	String	图片地址	-	-
width	Number, String	图片宽度，单位rpx	576	-
height	Number, String	图片高度，单位rpx	318	-
title	String	提示信息标题	-	-
color	String	提示信息标题字体颜色	-	如果值为空，可通过css变量（--fui-color-section）改变字体颜色
size	Number, String	提示信息标题字体大小，单位rpx	32	-
descr	String	提示信息描述	-	-
descrColor	String	提示信息描述字体颜色	-	如果值为空，可通过css变量（--fui-color-label）改变字体颜色
descrSize	Number, String	提示信息描述字体大小，单位rpx	24	-
isFixed	Boolean	缺省页内容是否固定在页面中间位置	false	-
marginTop	Number, String	缺省页内容margin-top值	0	-

Events

事件名	说明	回调参数
-	-	-

示例预览