Card 商品卡片

介绍

商品卡片,用于展示商品的图片、价格等信息。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-card": "@vant/weapp/card/index"
  3. }

代码演示

基础用法

  1. <van-card
  2. num="2"
  3. price="2.00"
  4. desc="描述信息"
  5. title="商品标题"
  6. thumb="{{ imageURL }}"
  7. />

高级用法

可以通过插槽添加定制内容。

  1. <van-card
  2. num="2"
  3. tag="标签"
  4. price="10.00"
  5. desc="描述信息"
  6. title="商品标题"
  7. thumb="{{ imageURL }}"
  8. >
  9. <view slot="footer">
  10. <van-button size="mini">按钮</van-button>
  11. <van-button size="mini">按钮</van-button>
  12. </view>
  13. </van-card>

API

Props

参数说明类型默认值版本
thumb左侧图片string--
thumb-mode左侧图片裁剪、缩放的模式,可选值参考小程序 image 组件 mode 属性值stringaspectFit-
title标题string--
desc描述string--
tag标签string--
num商品数量string | number--
price商品价格string | number--
origin-price商品划线原价string | number--
centered内容是否垂直居中stringfalse-
currency货币符号string¥-
thumb-link点击左侧图片后跳转的链接地址string--
link-type链接跳转类型,可选值为 redirectTo switchTab reLaunchstringnavigateTo-
lazy-load是否开启图片懒加载booleanfalse-

Slot

名称说明
title自定义标题栏,如果设置了title属性则不生效
desc自定义描述栏,如果设置了desc属性则不生效
num自定义数量
price自定义价格
origin-price自定义商品原价,如果设置了origin-price属性则不生效
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片,如果设置了thumb属性则不生效
tag自定义图片角标,如果设置了tag属性则不生效
tags自定义描述下方标签区域
footer自定义右下角内容

外部样式类

类名说明
custom-class根节点样式类
thumb-class左侧图片样式类
title-class标题样式类
price-class价格样式类
origin-price-class划线原价样式类
desc-class描述样式类
num-class数量样式类

Card 商品卡片 - 图1