Avatar 頭像 · Color Ui 聯合開發文檔

![](https://img.kancloud.cn/61/75/6175fb236be4e4e09dbf7125f947b206_384x123.png) ``` <view class="cu-bar bg-white"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像形狀 </view> </view> <view class="padding"> <view class="cu-avatar round" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view> <view class="cu-avatar radius margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> </view> ``` ![](https://img.kancloud.cn/49/88/4988a8f54af3aa9d5993b79d7b14ff2b_372x351.png) ``` <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像尺寸 </view> </view> <view class="padding"> <view class="cu-avatar sm round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view> <view class="cu-avatar round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> <view class="cu-avatar lg round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view> <view class="cu-avatar xl round margin-left" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view> </view> <view class="padding"> <view class="cu-avatar sm round margin-left bg-red"> A</view> <view class="cu-avatar round margin-left bg-red">B</view> <view class="cu-avatar lg round margin-left bg-red">C</view> <view class="cu-avatar xl round margin-left bg-red">D</view> </view> <view class="padding"> <view class="cu-avatar sm round margin-left bg-red"> 蔚</view> <view class="cu-avatar round margin-left bg-red">藍</view> <view class="cu-avatar lg round margin-left bg-red"> <text>wl</text> </view> <view class="cu-avatar xl round margin-left bg-red"> <text class="avatar-text">網絡</text> </view> </view> ``` ![](https://img.kancloud.cn/ed/e8/ede86e648d1e24d60ba9abbed67ca4a7_369x131.png) ``` <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>內嵌文字(圖標) </view> </view> <view class="padding"> <view class="cu-avatar radius"> <text class="cuIcon-people"></text> </view> <view class="cu-avatar radius margin-left"> <text>港</text> </view> </view> ``` ![](https://img.kancloud.cn/b5/64/b564a16bf07307e41941d9ab16214ef7_379x253.png) ``` <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像顏色 </view> </view> <view class="padding-sm"> <view class="cu-avatar round lg bg-{{item.name}} margin-xs" wx:for="{{ColorList}}" wx:key> <text class="avatar-text">{{item.name}}</text> </view> </view> ``` ![](https://img.kancloud.cn/3e/a7/3ea7a41429512e7fd070817c237f0ff6_379x141.png) ``` <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像組 </view> </view> <view class="padding"> <view class="cu-avatar-group"> <view class="cu-avatar round lg" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"></view> </view> </view> ``` ![](https://img.kancloud.cn/fd/5e/fd5e770719da6174808ea33250b53f69_362x123.png) ``` <view class="cu-bar bg-white margin-top"> <view class="action"> <text class="cuIcon-title text-blue"></text>頭像標簽 </view> </view> <view class="padding"> <view class="cu-avatar round lg margin-left" wx:for="{{4}}" wx:key style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big1000{{index+1}}.jpg);"> <view class="cu-tag badge {{index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'}}"></view> </view> </view> ```