支付宝小程序扩展组件 卡片·Card

卡片。

扫码体验

示例代码

{
 "defaultTitle": "Card",
 "usingComponents":{
   "card":"mini-ali-ui/es/card/index"
 }
}
<view class="container">
 <card title="卡片标题1"
   onCardClick="onCardClick"
   info="点击了第一个card" />
 <view style="margin-top: 10px;" />
 <card thumb="{{thumb}}"
   title="卡片标题2"
   subTitle="副标题非必填2"
   onCardClick="onCardClick"
   info="点击了第二个card" />
 <view style="margin-top: 10px;" />
 <view>
   <card thumb="{{thumb}}"
     title="卡片标题3"
     subTitle="副标题非必填3"
     onCardClick="toggle"
     action="描述文字"
     onActionClick="onActionClick"
     extraAction="点击卡片展开/收起↑"
     onExtraActionClick="onExtraActionClick"
     info="点击了第三个card"
     expand="{{expand3rd}}"
     bgImg="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*OjyRRqjLM6MAAAAAAAAAAABkARQnAQ" />
 </view>
 <view style="margin-top: 10px;" />
 <view>
   <card thumb="{{thumb}}"
     title="卡片标题3"
     subTitle="副标题非必填3"
     onCardClick="onCardClick"
     info="点击了第三个card"
     bgImg="https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*OjyRRqjLM6MAAAAAAAAAAABkARQnAQ"
     expand
     />
</view>
Page({
 data: {
   thumb: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*b-kqQ4RZgsYAAAAAAAAAAABkARQnAQ',
   expand3rd: false,
 },
 onCardClick(ev) {
   my.alert({
     content: ev.info,
   });
 },
 onActionClick() {
   my.alert({
     content: 'action clicked',
   });
 },
 onExtraActionClick() {
   my.alert({
     content: 'extra action clicked',
   });
 },
 toggle() {
   this.setData({
     expand3rd: !this.data.expand3rd,
   });
 },
});

属性