Skip to content

Empty 内容为空

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

平台差异说明

App(vue)App(nvue)H5微信小程序

基本使用

提示

我们的专业设计师精心为您准备了一套精美默认图,带有图片和Sketch文件,您可以下载或修改后再使用:资源下载

  • 通过text参数配置提示的文字内容
  • 通过mode(默认为data)参数配置要显示的图标
html
<su-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></su-empty>

示例源码

点击可以查看 右侧演示页面的源码

内置图标

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

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

API

Props

参数说明类型默认值可选值
icon内置图标名称,或图片路径,建议绝对路径String--
text文字提示String--
textColor文字颜色String#c0c4cc-
textSize文字大小14--
icon-color图标的颜色String#c0c4cc-
icon-size图标的大小String | Number90-
mode内置的图标,见上方说明Stringdata-
width图标的宽度,单位rpxString | Number160-
height图标的高度,单位rpxString160-
show是否显示组件Booleantruefalse
margin-top组件到上一个元素的间距,单位rpxString | Number0-

Slot

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

Released under the MIT License.

Released under the MIT License.