后浪云百度小程序教程：person-card 个人信息卡

2022-12-7

person-card 个人信息卡
- 属性说明
- 示例
  - 代码示例

person-card 个人信息卡

解释：个人信息卡组件，可配置卡片类型、卡片背景图、卡片名称、卡片信息功能，适用于信息展示，并可放置在页面的任何位置。

属性说明

属性名	类型	必填	默认值	说明
type	String	否	normal	信息卡类型。normal：默认普通模式，big：大图模式
bgImg	String	否		卡片背景图
name	String	是		卡片名称
infoList	Array	是		卡片信息，最多可配置 5 条，超过不会显示
person-card-wrap	String	否		提供卡片的扩展样式类，供开发者自定义组件样式，可通过此 class 改变卡片的样式，如背景颜色，背景图的展现方式
info-name-wrap	String	否		提供卡片的扩展样式类，供开发者自定义组件样式，可通过此 class 改变卡片 name 的的样式
info-title-wrap	String	否		提供卡片的扩展样式类，供开发者自定义组件样式，可通过此 class 改变卡片信息的左侧标题样式
info-desc-wrap	String	否		提供卡片的扩展样式类，供开发者自定义组件样式，可通过此 class 改变卡片信息的右边内容样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

 
 
 
  
  
  <view class="wrap">
  
  
   <view class="content">
  
  
   <view class="card-panel" s-for="item, index in personList">
  
  
   <view class="comp-wrap">
  
  
   <smt-person-card
  
  
   name="主标题"
  
  
   type="normal"
  
  
   info-list="{{item.personCard}}"
  
  
   bg-img="{{item.imgSrc}}"
  
  
   />
  
  
   </view>
  
  
   </view>
  
  
   </view>
  
  
  </view>

作者：后浪云

链接：https://www.idc.net/help/186011/

文章版权归作者所有，未经允许请勿转载。

THE END