uniapp组件库Card 卡片 的使用方法

目录

#平台差异说明

#基本使用

#配置卡片间距

#配置卡片左上角的缩略图

#配置卡片边框

#设置内边距

#API

#Props

#Slot

#Event

---

卡片组件一般用于多个列表条目，且风格统一的场景。

#平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	√	√	√	√

#基本使用

组件的头部信息可以通过参数配置，其他主体和底部的信息，需要通过slot传入。

• title配置标题

• sub-title配置副标题

#配置卡片间距

可以通过margin参数配置卡片与屏幕左右的边距，以及上下卡片之间的距离，如: 20rpx 30rpx、20rpx 30rpx 30rpx 20rpx。

注意：当设置full参数为true的时候，也就是卡片占据屏幕总宽度的时候，通过margin配置的左右边距会失效。

<u-card margin="30rpx"></u-card>

#配置卡片左上角的缩略图

这个缩略图是可选的，显示在卡片的左上角位置，如果配置了thumb参数(图片路径)，就会显示图片。

• thumb缩略图路径

• thumb-width缩略图宽度，高等于宽

• thumb-circle缩略图是否为圆形

#配置卡片边框

这里说的边框，有3个：

• border配置是否显示整个卡片的外边框

• head-border-bottom配置是否显示卡片内部头部的下边框

• foot-border-top配置是否显示卡片内部底部的上边框

#设置内边距

默认下，卡片内部的头部，主体，底部都有一个内边距，可以通过配置padding参数去覆盖：

<u-card padding="30"></u-card>

#API

#Props

参数	说明	类型	默认值	可选值
full	卡片与屏幕两侧是否留空隙	Boolean	fasle	true
title	头部左边的标题	String	-	-
title-color	标题颜色	String	#303133	-
title-size	标题字体大小，单位rpx	String | Number	30	-
sub-title	头部右边的副标题	String	-	-
sub-title-color	副标题颜色	String	#909399	-
sub-title-size	副标题字体大小	String | Number	26	-
border	是否显示边框	Boolean	true	false
index	用于标识点击了第几个卡片	String | Number	-	-
margin	卡片与屏幕两边和上下元素的间距，需带单位，如"30rpx 20rpx"，见上方说明	String	30rpx	-
border-radius	卡片整体的圆角值，单位rpx	String | Number	16	-
head-style	头部自定义样式，对象形式	Object	-	-
body-style	主体自定义样式，对象形式	Object	-	-
foot-style	底部自定义样式，对象形式	Object	-	-
head-border-bottom	是否显示头部的下边框	Boolean	true	false
foot-border-top	是否显示底部的上边框	Boolean	true	false
thumb	缩略图路径，如设置将显示在标题的左边，不建议使用相对路径	String	-	-
thumb-width	缩略图的宽度，高等于宽，单位rpx	String | Number	60	-
thumb-circle	缩略图是否为圆形	Boolean	false	true
padding	给head，body，foot部的内边距，见上方说明，单位rpx	String | Number	30	-
show-head 1.3.5	是否显示头部	Boolean	true	false
show-foot 1.3.5	是否显示尾部	Boolean	true	false
box-shadow 1.6.2	卡片外围阴影，字符串形式	String	none	-

#Slot

名称	说明
head	自定义卡片头部内容
body	自定义卡片主体部分内容
foot	自定义卡片底部部分内容

#Event

事件名	说明	回调参数
click	整个卡片任意位置被点击时触发	index: 用户传递的标识符
head-click	卡片头部被点击时触发	index: 用户传递的标识符
body-click	卡片主体部分被点击时触发	index: 用户传递的标识符
foot-click	卡片底部部分被点击时触发	index: 用户传递的标识符