更新记录

V1.0.0（2020-07-27） 下载此版本

支持头像占位图/title占位图/banner占位图/头像大小设置/头像形状设置.etc

平台兼容性

skeleton组件

1.描述

此组件用于加载数据时占位图显示，跟vant-ui骨架屏用法相似，但比vant-ui更灵活

2.用法

• 基本用法

  <skeleton :row="3" animate :loading="loading" >
  <view>
  content
  </view>
  </skeleton>

• 显示 title ——通过 title 属性显示title占位图

<skeleton :row="3" title animate :loading="loading">
  <view>
    content
  </view>
</skeleton>

• 显示头像（上面)——通过avatar=‘top’让头像的占位图上面显示

  <skeleton  :avatar="top"  avatarAlign="left" :row="3" animate :loading="loading" style="margin-top:24rpx;">
  <view>
  content
  </view>
  </skeleton>

• 显示头像（左边)——通过avatar=‘left’让头像的占位图左边显示

  <skeleton title :avatar="left" :row="3" animate :loading="loading" style="margin-top:24rpx;">
  <view>
  content
  </view>
  </skeleton>

• 显示banner——通过 banner属性显示banner占位图（只显示banner，不显示内容占位图时设置row="0"）

  <skeleton banner :row="0" animate :loading="loading" style="margin-top:24rpx;">
  <view>
  content
  </view>
  </skeleton>

  3. API

  Props

  属性名	说明	类型	默认值	可取值
  loading	是否显示骨架屏	Boolean	true	true/false
  row	段落行数	String/ Number	3	0表示不展现
  rowWidth	段落行宽度	Boolean/Number	'100%'
  title	是否显示标题	Boolean/String	false
  banner	是否显示banner	Boolean /String	false
  animate	是否开启动画	Boolean /String	false
  avatar	头像位置	Boolean /String	''空	left/top
  avatarSize	头像大小	String	-
  avatarShape	头像形状	String	circle	circle/round