Card 卡片

使用指南

在 index.json 中引入组件

  1. {
  2.   "usingComponents": {
  3.     "zan-card": "path/to/zanui-weapp/dist/card/index"
  4.   }
  5. }

代码演示

基础用法

卡片可以用于左侧图片，右侧描述信息的展示。默认是商品相关内容的展示，需要展示其他内容可以使用自定义slot。

  1. <zan-card
  2.   card-class="test-card"
  3.   thumb="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"
  4.   price="999.99"
  5.   title="红烧牛肉【虚拟商品】【有库存】【有sku】"
  6.   num="2"
  7.   desc="3000克 50%"
  8.   status="已发货"
  9. >
  10. </zan-card>

使用slot

zan-card 由 zan-cardthumb 和 zan-carddetail 组成。分别负责左侧图片展示和右侧内容区域展示。两部分内容可以使用slot进行替换。

  1. <zan-card
  2.   card-class="test-card"
  3.   useDetailSlot="{{ true }}"
  4. >
  5.   <!-- 右侧详情 -->
  6.   <view slot="detail-slot" class="zan-card__detail">
  7.     我是标题
  8.   </view>
  9. </zan-card>

API

参数 说明 类型 默认值
card-class 自定义最外层class String -
thumb 左侧缩略图 String -
price 商品价格 String -
title 商品标题 String -
desc 商品描述 String -
num 商品数量 Number -
status 商品状态 String -
useDetailSlot 是否使用detail-slot（true时需要添加对应slot） Boolean false

Card 卡片 - 图1
微信扫一扫

原文:

https://www.youzanyun.com/zanui/weapp#/zanui/layout/card