如何设置头像Avatar的信息展示组件_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

用来代表用户或事物，更加直观的展现人物或事物特征。

属性

属性	类型	必填	默认值	说明
size	'x-small' \| 'small' \| 'medium' \| 'large'	否	'medium'	x-small：80 x 80 small：88 x 88 medium：104 x 104 large：120 x 120
src	string	否	-	头像地址，默认为灰色的内置图片。
name	string	否	-	第一行信息
desc	string	否	-	第二行补充信息当 name 不存在时，不显示；当 size 为 x-small，不显示。
className	string	否	-	类名

样式类

类名	说明
amd-avatar	整体样式
amd-avatar-src	图片样式
amd-avatar-content	头像描述样式
amd-avatar-name	name 样式
amd-avatar-desc	desc 样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <demo-block title="基础用法-四种尺寸">
    <view class="demo-list">
      <view class="list-item" a:for="{{images}}">
        <avatar src="{{item}}" />
      </view>
    </view>
  </demo-block>
  <demo-block title="占位头像">
    <avatar/>
  </demo-block>
  <demo-block title="不同大小">
    <view class="demo-list">
      <view class="list-item" a:for="{{sizes}}">
        <avatar size="{{item}}" src="{{images[0]}}" />
      </view>
    </view>
  </demo-block>
  <demo-block title="配合列表使用" padding="0">
    <list-item>
      <avatar name="Novlee Spicer" desc="Deserunt dolor ea eaque eos" src="{{images[0]}}" />
    </list-item>
    <list-item>
      <avatar desc="仅有 desc 时，name不显示" src="{{images[0]}}" />
    </list-item>
    <list-item>
      <avatar name="size=x-small，desc不显示" desc="摘要信息" size="x-small" src="{{images[0]}}" />
    </list-item>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({
  data: {
    sizes: ['x-small', 'small', 'medium', 'large'],
    images: [
      'https://images.example.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      'https://images.example.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
      'https://images.example.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
      'https://images.example.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
    ],
  },
});

index.acss 的代码示例如下：

.demo-list {
  display: flex;
  align-items: flex-start;
}
.list-item {
  margin-right: 24rpx;
  text-align: left;
}

.list-item .size-text {
  padding-top: 12rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Avatar",
  "usingComponents": {
    "avatar": "antd-mini/es/Avatar/index",
    "list-item": "antd-mini/es/List/ListItem/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}