Skip to content

Empty 内容为空

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

平台差异说明

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

基本使用

提示

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

  • 通过text参数配置提示的文字内容
  • 通过mode(默认为data)参数配置要显示的图标
html
 <tn-empty mode="cart"></tn-empty>

内置图标

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

名称说明
cart购物车为空
page页面不存在
search搜索结果为空
address地址为空
network网络不通
order订单为空
order订单为空
coupon优惠券为空
favor暂无收藏
permission无权限
history历史记录为空
message暂无消息
list列表为空
data暂无数据
comment暂无评论

API

Props

参数说明类型默认值可选值
icon内置图标名称,或图片路径,建议绝对路径String--
text提示文字String--
textColor文字颜色String--
textSize文字大小,单位rpxNumber0-
iconColor图标的颜色String--
iconSize图标的大小,单位rpxNumber0-
mode预置图标类型,见上方说明Stringdata-
imgWidth图片宽度(当图标为图片时生效)单位rpxNumber0-
imgHeight图片高度(当图标为图片时生效)单位rpxNumber0-
show显示空白页Booleantruefalse
customStyle自定义组件样式Object--

Slot

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