卡片。
| 属性名 | 描述 | 类型 | 默认值 | 必选 |
| thumb | Card缩略图地址 | String | false | |
| title | Card标题 | String | true | |
| subTitle | Card副标题 | String | false | |
| footer | footer文字 | String | false | |
| footerImg | footer图片地址 | String | false | |
| onCardClick | Card点击的回调 | (info: Object) => void | false | |
| info | 用于点击卡片时往外传递数据 | String | false |
// 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,
});
}
});
