# Empty 内容为空

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

# 平台差异说明

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

# 基本使用

提示

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

  • 通过text参数配置提示的文字内容
  • 通过mode(默认为data)参数配置要显示的图标
 <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 文字大小,单位rpx Number 0 -
iconColor 图标的颜色 String - -
iconSize 图标的大小,单位rpx Number 0 -
mode 预置图标类型,见上方说明 String data -
imgWidth 图片宽度(当图标为图片时生效)单位rpx Number 0 -
imgHeight 图片高度(当图标为图片时生效)单位rpx Number 0 -
show 显示空白页 Boolean true false
customStyle 自定义组件样式 Object - -

# Slot

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