支付寶小程序擴(kuò)展組件 卡片·Card

卡片。

掃碼體驗(yàn)

示例代碼

{
 "defaultTitle": "Card",
 "usingComponents":{
   "card":"mini-ali-ui/es/card/index"
 }
}
<view class="container">
 <card title="卡片標(biāo)題1"
   onCardClick="onCardClick"
   info="點(diǎn)擊了第一個(gè)card" />
 <view style="margin-top: 10px;" />
 <card thumb="{{thumb}}"
   title="卡片標(biāo)題2"
   subTitle="副標(biāo)題非必填2"
   onCardClick="onCardClick"
   info="點(diǎn)擊了第二個(gè)card" />
 <view style="margin-top: 10px;" />
 <view>
   <card thumb="{{thumb}}"
     title="卡片標(biāo)題3"
     subTitle="副標(biāo)題非必填3"
     onCardClick="toggle"
     action="描述文字"
     onActionClick="onActionClick"
     extraAction="點(diǎn)擊卡片展開/收起↑"
     onExtraActionClick="onExtraActionClick"
     info="點(diǎn)擊了第三個(gè)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="卡片標(biāo)題3"
     subTitle="副標(biāo)題非必填3"
     onCardClick="onCardClick"
     info="點(diǎn)擊了第三個(gè)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,
   });
 },
});

屬性