Skip to content

Empty 内容为空

13:10

该组件用于需要加载内容,但是加载的第一页数据就为空,提示一个"没有内容"的场景, 我们精心挑选了十几个场景的图标,方便您使用。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

提示

新版本移除了此组件内置的图片,因为这些图片太大,影响了组件库的大小。改用字体图标的形式提供,缺点是字体图标只能是单色的,形状与原来的图片也有些许出入。 基于以上,我们的专业设计师精心为您准备了一套精美缺省图,带有图片和Sketch文件,您可以下载或修改后再使用:资源下载

  • 通过text参数配置提示的文字内容
  • 通过mode(默认为data)参数配置要显示的图标
html
<u-empty text="所谓伊人,在水一方" mode="list"></u-empty>

内置图标

这些图标已内置,直接通过mode参数引用即可

名称说明
car购物车为空
page页面不存在
search没有搜索结果
address没有收货地址
wifi没有WiFi
order订单为空
coupon没有优惠券
favor无收藏
permission无权限
history无历史记录
news无新闻列表
message消息列表为空
list列表为空(通用)
data数据为空(默认,通用)

API

Props

参数说明类型默认值可选值
color文字颜色String#c0c4cc-
text文字提示String无内容-
icon-coloricon的颜色,字体图标时有效String#c0c4cc-
icon-sizeicon的大小,单位rpx,如果src为图片路径,此参数可以设置图片的尺寸String | Number120-
src图标名称或者图片路径(绝对路径),如定义,mode参数会失效String--
font-size提示文字的大小,单位rpxString | Number28-
mode内置的图标,见上方说明Stringdata-
img-width 已废弃图标的宽度,单位rpxString | Number240-
img-height 已废弃图标的高度,单位rpxStringauto-
show是否显示组件Booleantruefalse
margin-top组件到上一个元素的间距,单位rpxString | Number0-

Slot

名称说明
bottom给组件底部传入slot内容