卡片 Card

基础卡片布局,常见应用场景为模块展示。

WARNING

由于本组件示例代码的wxss过多,本文档不再展示,大家可以到github卡片 Card - 图1自行复制。

卡片类型

通过type属性为primaryavatarcover可设置不同类型的卡片布局。默认值为primary

通过imagetitle属性设置图片(头像)和标题(昵称)。

typeavatar时可通过describe属性设置额外描述,通过设置slot="more"设置卡片右上角的内容。

内容部分通过slot传入卡片对应区域。

TIP

card仅设置了组件的宽度,高度由卡片容器内的内容撑开。

卡片 Card - 图2

卡片 Card - 图3

卡片 Card - 图4

示例代码

  1. <!-- primary -->
  2. <l-card type="primary"
  3. image="/image/1.png"
  4. title="新疆精选苹果">
  5. <!-- 此处为content -->
  6. <view class="content">
  7. 新疆苹果,又名塞威氏苹果,蔷微科,落叶乔木。原产新疆西部天山北山麓,
  8. 主要集中分布于伊犁河谷果子沟,新源县境内的那拉提野果林,巩留的莫合
  9. 林场,垂直分布区域海拔在1000~1300m的山顶、山坡、河谷区域。
  10. </view>
  11. </l-card>
  12. <!-- cover -->
  13. <l-card type="cover"
  14. image="/image/5.png"
  15. title="年味儿的科技大升级">
  16. <view class="content">
  17. 一部分人回乡,一部分人把父母接到了身边,还有一部分人,干脆把假期变成了真正属于自己的时间。
  18. 总有- -些科技,升级了生活方式,延展了过年形式的体验,还有一些欲...
  19. </view>
  20. </l-card>
  21. <!-- avatar -->
  22. <l-card type="avatar" l-class="card" image="/image/2.png"
  23. title="七月在夏天" describe="18个小时前">
  24. <!-- 此处为content -->
  25. <view class="avter-content">
  26. 很简单,豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子,会涉及到各方背后利益关系的片子...
  27. </view>
  28. <view class="avter-share-container">
  29. <view class="like-container">
  30. <l-icon name="like" color="#666" size="28" />
  31. <view class="number">160喜欢</view>
  32. </view>
  33. <view class="like-container">
  34. <l-icon name="default" color="#666" size="28" />
  35. <view class="number">10评论</view>
  36. </view>
  37. </view>
  38. <l-tag shape="circle"
  39. bg-color="#f3f3f3"
  40. font-color="#3963BC"
  41. slot="more"
  42. size="large">
  43. + 关注
  44. </l-tag>
  45. </l-card>

卡片的图片位置

可通过position属性设置图片的卡片中的位置。默认值为left

卡片 Card - 图5

示例代码

  1. <l-card type="primary"
  2. l-img-class="right-card"
  3. position="right"
  4. image="/images/3.png"
  5. title="做一个热爱生活的人!">
  6. <view class="content">
  7. 很简单,豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子...
  8. </view>
  9. </l-card>
  10. <l-card type="primary"
  11. l-img-class="right-card"
  12. position="left"
  13. image="/images/3.png">
  14. <view class="content">
  15. 很简单,豆瓣现在这样就给大家指了一条明路:以后凡是这种国产的风口浪尖的的片子...
  16. </view>
  17. </l-card>

纯文字卡片

可通过plaintext属性设置图片的卡片中的位置。默认值为false

卡片 Card - 图6

示例代码

  1. <l-card type="primary"
  2. plaintext="{{true}}"
  3. title="有什么笑话可以笑一辈子?">
  4. <view class="content">
  5. 大雄要死掉了,他对妻子说:我死之后你找一个男人我就在地下打一一个滚。
  6. 说完就咽气了。某天妻子有事要找大雄,就去了地府问阎王找人,但是地府人那么多...
  7. </view>
  8. </l-card>

通栏卡片

可通过full属性设置卡片为通栏卡片。默认值为false

卡片 Card - 图7

示例代码

  1. <l-card type="primary"
  2. full="{{true}}"
  3. image="/image/4.png"
  4. title="做一个热爱生活的人!">
  5. <view class="content">
  6. 大雄要死掉了,他对妻子说:我死之后你找一个男人我就在地下打一一个滚。
  7. 说完就咽气了。某天...
  8. </view>
  9. </l-card>

注意事项

positionplaintext属性仅在typeprimary时生效。

卡片属性 (Card Attributes)

参数说明类型可选值默认值
type卡片类型Stringprimary/avatar/coverprimary
image卡片内图片的路径String—-—-
image-mode卡片内图片的显示模式参考微信image组件mode属性卡片 Card - 图8—-—-
title卡片的标题String—-—-
describe卡片的描述String—-—-
position卡片内图片的位置Stringleft/rightleft
plaintext卡片是否为纯文字卡片Boolean—-false
full卡片是否为通栏卡片Boolean—-false

卡片外部样式类 (Card ExternalClasses)

外部样式类名说明备注
l-class外部样式类,设置整体卡片样式—-
l-img-class外部样式类,覆盖图片(头像)的样式—-
l-title-class外部样式类,覆盖标题(昵称)的样式—-