Skeleton 骨架屏请使用手机扫码体验

在页面上待加载区域填充灰色的占位图，本质上是界面加载过程中的过渡效果。

长方形

  1. html
    <skeleton-square 
  2.     width="200px"
  3. >
  4. </skeleton-square>

圆形

  1. html
    <skeleton-circle 
  2.     diameter="50px"
  3. >
  4. </skeleton-circle>

横向排列

  1. html
    <row  padding="15px 10px 0">
  2.     <skeleton-square 
  3.         width="200px"
  4.     ></skeleton-square>
  5.     <skeleton-square 
  6.         width="50px" 
  7.         margin="0 0 0 40px"
  8.     ></skeleton-square>
  9.     <skeleton-square 
  10.         width="50px" 
  11.         margin="0 0 0 10px"
  12.     ></skeleton-square>
  13. </row>

纵向排列

  1. html
    <column>
  2.     <skeleton-square 
  3.         width="275px" 
  4.         :count="2" 
  5.         margin="5px 10px 5px 10px"
  6.     ></skeleton-square>
  7.     <skeleton-square 
  8.         width="100px" 
  9.         margin="5px 10px 5px 10px"
  10.     ></skeleton-square>
  11. </column>

Prop

layout（row|column）

字段说明类型默认值
width宽度String-
padding填充间距String-

basic（square|circle）

字段说明类型默认值
width宽度String-
margin外部间距String-

Skeleton 骨架屏 - 图1