微信小程序开发指南

基于ColorUI的组件化页面开发


头像尺寸

头像尺寸

  • 样式图例

  • 示例代码
<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>

页面列表

ITEM_HTML