Skeleton 骨架屏

骨架屏用于在数据加载时占位，支持文本多行、图片与圆形三种样式，内置呼吸灯动画，并可通过 loading 在骨架与真实内容之间切换。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-skeleton 的用法，可按需组合。

<template>
  <mu-skeleton></mu-skeleton>
</template>

多行文本

设置文本骨架的行数，仅 type="text" 时生效。

<mu-skeleton :rows="4"></mu-skeleton>

类型

将骨架切换为图片或圆形样式。

<mu-skeleton type="image" :height="240"></mu-skeleton>
<mu-skeleton type="circle" :width="140"></mu-skeleton>

加载切换

loading 为 false 时渲染默认插槽中的真实内容。

<mu-skeleton :loading="loading" :rows="2"></mu-skeleton>
<mu-button type="primary" @click="toggle">切换 loading</mu-button>

自定义骨架

通过 skeleton 插槽自定义骨架内容，替代默认骨架渲染。

<mu-skeleton>
  <template #skeleton>
    <view class="custom-row">
      <mu-skeleton type="circle" :width="96" :animated="false"></mu-skeleton>
      <view class="custom-lines">
        <mu-skeleton type="text" :width="200" :animated="false"></mu-skeleton>
        <mu-skeleton type="text" :width="320" :animated="false"></mu-skeleton>
      </view>
    </view>
  </template>
</mu-skeleton>

关闭动画

控制是否开启呼吸灯动画。

<mu-skeleton :animated="false" :rows="2"></mu-skeleton>

圆角图片

设置图片骨架是否使用圆角。

<mu-skeleton type="image" :height="240" :round="true"></mu-skeleton>

宽高

设置骨架的宽度与高度，数字按 rpx 处理，也可传字符串。

<mu-skeleton type="text" width="360rpx" :height="40"></mu-skeleton>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
loading	是否显示骨架；为 false 时渲染默认插槽内容	boolean	true
animated	是否开启呼吸灯动画	boolean	true
type	骨架类型，可选 text、image、circle	string	text
rows	文本骨架行数，仅 type="text" 生效	number	1
width	宽度，数字按 rpx 处理，也可传字符串	any	-
height	高度，数字按 rpx 处理，也可传字符串	any	-
round	图片骨架是否使用圆角	boolean	false
customClass	自定义类名，附加在骨架根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于骨架根节点	any	-

插槽

组件支持以下插槽。

名称	说明
default	加载完成（loading 为 false）时展示的真实内容
skeleton	自定义骨架内容，替代默认骨架渲染

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：loading 为 true 时显示骨架，为 false 时才渲染默认插槽的真实内容。
• 使用注意：type 仅识别 image 与 circle，其余值一律按文本骨架渲染，rows 仅对文本骨架生效。
• 使用注意：使用 skeleton 插槽自定义骨架后，type/rows/width/height 等属性不再控制骨架外观。