EmptyBox 通用缺省

用于在页面没有数据、网络错误或处于特定空状态时进行友好提示。

引入

组件位置

/pages/component/emptyBox/index /main/pages/component/emptyBox/index

在 app.json 或 index.json 中引入组件：

"usingComponents": {
  "emptyBox": "/pages/component/emptyBox/index"
}

代码演示

基础用法

通过 emptyInfo 传入图标、标题和描述。

<emptyBox emptyInfo="{{ emptyInfo }}"></emptyBox>

Page({
  data: {
    emptyInfo: {
      text: '暂无数据',
      imageUrl: 'https://img01.yzcdn.cn/vant/empty-image-default.png'
    }
  }
});

自定义描述

可以传入额外的 desc 文字来进行更详细的说明。

<emptyBox 
  emptyInfo="{{ { text: '没找到相关内容', desc: '可以尝试更换关键词再次搜索', imageUrl: 'https://img01.yzcdn.cn/vant/empty-image-search.png' } }}" 
></emptyBox>

API

Props

参数	说明	类型	默认值
emptyInfo	详情对象，包含 imageUrl, text, desc	Object	{}
type	组件类型，设为 controller 时图标会应用额外样式	string	''

emptyInfo 参数说明

参数	说明	类型
imageUrl	缺省页展示图片的地址	string
text	主标题文字	string
desc	副标题/详细描述文字	string

样式说明

该组件内部图标默认大小为 400rpx * 400rpx，主标题字体大小为 40rpx，颜色为 #555555。 当 type 为 controller 时，图标类名为 .device-img，可用于针对特定业务场景（如设备管理）覆盖样式。