骨架屏 Skeleton

在需要等待加载内容的位置提供一个占位图形组合。

骨架屏由标题、段落、头像三部分组成，分别由 title 、 paragraph 、 avatar 属性控制该部分的显隐；标题和段落默认显示，头像默认不显示。

该组件主要适用于以下几种场景：

1. 网络较慢，需要长时间等待加载处理的情况下。
2. 图文信息内容较多的列表/卡片中。
3. 只在第一次加载数据的时候使用。
4. 可以被 Loading 组件完全代替，但是在可用的场景下可以比 Loading 组件提供更好的视觉效果和用户体验。

基础用法

加载完成后展示的内容需放在插槽中，通过设置 loading 属性为 true 时，显示骨架屏占位图；反之则直接展示插槽内容。默认值为 true 。

示例代码

<l-skeleton 
  loading="{{true}}"
  rows="3"
>
  <!-- 插槽内容 -->
  <view/>
</l-skeleton>

设置段落占位图的行数

通过 rows 属性设置段落占位图的行数。默认值为 0 。

示例代码

<l-skeleton 
  loading="{{true}}"
  rows="3"
>
  <!-- 插槽内容 -->
  <view/>
</l-skeleton>

设置段落及标题占位图宽度及高度

通过设置 title-width 属性修改标题占位图的宽度。默认值为父容器宽度的 50%。

通过设置 rows-width 属性修改段落占位图的宽度。段落占位图最后一行宽度默认值为父容器的 70% ，其余行默认宽度为 100% 。

通过设置 rows-height 属性修改段落占位图的宽度。段落占位图每一行高度默认为 34rpx 。

rows-width 和 rows-height 属性可接收数组和字符串。若为数组时则为对应的每行宽度和高度，反之则是最后一行的宽度和高度。

示例代码

<l-skeleton 
  loading="{{true}}"
  rows="3"
  title-width="240rpx"
  rows-width="{{['240rpx','240rpx','120rpx']}}"
  rows-height="100rpx"
>
  <!-- 插槽内容 -->
  <view/>
</l-skeleton>

设置头像占位图

通过设置 avatar 属性可显示头像展示图。默认值为 false 。

通过 avatar-shape 和 avatar-size 属性可设置头像占位图的形状和大小。

示例代码

<l-skeleton 
  loading="{{true}}"
  avatar="{{true}}"
  avatar-size="32rpx"
  avatar-shape="circle"
  rows="3"
>
  <!-- 插槽内容 -->
  <view/>
</l-skeleton>

展示动画效果

通过设置 active 属性为 false 可关闭占位图动画效果，默认值为 true 。

示例代码

<l-skeleton 
  loading="{{true}}"
  paragraph="{{true}}"
  title="{{true}}"
  avatar="{{true}}"
  avatar-size="32rpx"
  avatar-shape="circle"
  rows="3"
  active="{{false}}"
>
  <!-- 插槽内容 -->
  <view/>
</l-skeleton>

骨架屏属性 (Skeleton Attributes)

骨架屏外部样式类 (Skeleton ExternalClasses)