阿里云首页 管理控制台

Card 卡片

卡片。

扫码体验

image.png

示例代码

// API-DEMO page/component/card.json
{
  "defaultTitle": "Card",
  "usingComponents":{
    "card": "mini-antui/es/card/index"
  }
}

<!-- API-DEMO page/component/card.axml -->
<view class="container">
  <card
    title="卡片标题1"
    subTitle="副标题非必填1"
    onClick="onCardClick"
    info="点击了第一个card"
  />
  <view style="margin-top: 10px;" />
  <card
    thumb="{{thumb}}"
    title="卡片标题2"
    subTitle="副标题非必填2"
    onClick="onCardClick"
    info="点击了第二个card"
  />
  <view style="margin-top: 10px;" />
  <card
    thumb="{{thumb}}"
    title="卡片标题3"
    subTitle="副标题非必填3"
    onClick="onCardClick"
    footer="描述文字"
    footerImg="{{footerImg}}"
    info="点击了第三个card"
  />

// API-DEMO page/component/card.js
Page({
  data: {
    thumb: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
    footerImg: 'https://gw.alipayobjects.com/zos/rmsportal/VBqNBOiGYkCjqocXjdUj.png',
  },
  onCardClick: function(ev) {
    my.showToast({
      content: ev.info,
    });
  }
});

属性

属性名描述类型默认值必选
thumbCard 缩略图地址。String-false
titleCard 标题。String-true
subTitleCard 副标题。String-false
footerfooter 文字。String-false
footerImgfooter 图片地址。String-false
onClickCard 点击的回调。(info: Object) => void-false
info用于点击卡片时往外传递数据。String-false