hy-skeleton 骨架屏

用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。

📌平台差异说明

APP(vue)	H5	微信小程序	支付宝小程序
✔	✔	✔	✔

⚠️注意事项

注意事项

• loading 属性为 undefined 或 true 时显示骨架屏，为 false 时显示插槽内容
• rowCol 属性优先级高于 theme 属性，如果设置了 rowCol，将忽略 theme 的配置
• 动画效果会增加一定的性能开销，在性能敏感的场景建议关闭动画
• 组件支持虚拟化 host 和全局样式，可以方便地集成到现有项目中

🏯基本使用示例

默认使用 text 主题，显示文本骨架屏。

<hy-skeleton />

不同主题

支持四种主题：text、avatar、paragraph、image。

提示

• text: 文本主题，默认显示单行文本
• avatar: 头像主题，显示一个圆形头像
• image: 图片主题，显示一个矩形图片占位
• paragraph: 段落主题，显示多行文本，最后一行宽度为 55%

<hy-skeleton theme="text" />
<hy-skeleton theme="avatar" />
<hy-skeleton theme="paragraph" />
<hy-skeleton theme="image" />

加载状态

通过 loading 属性控制骨架屏的显示与隐藏，loading 为 true 时显示骨架屏，为 false 时显示实际内容。

<hy-skeleton :loading="loading">
  <view>实际内容</view>
</hy-skeleton>

动画效果

支持两种动画效果：gradient（渐变加载动画）和 flashed（闪烁加载动画）。

<hy-skeleton animation="gradient" />
<hy-skeleton animation="flashed" />

自定义行列

通过 rowCol 属性可以自定义骨架屏的行列数量、宽度、高度、间距等。

<!-- 示例一：三行骨架图，第一行一列，第二行一列，第三行两列 -->
<hy-skeleton :rowCol="[1, 1, 2]" />

<!-- 示例二：自定义第三行的宽度为 100px -->
<hy-skeleton :rowCol="[1, 1, { width: '100px' }]" />

<!-- 示例三：第三行有两列，且自定义宽度、高度和间距 -->
<hy-skeleton :rowCol="[1, 2, [{ width: '100px', height: '20px' }, { width: '200px', height: '20px', marginLeft: '10px' }]]" />

完整示例

<template>
  <view>
    <hy-skeleton
      theme="avatar"
      :loading="loading"
      animation="gradient"
      :rowCol="[
        1,
        [
          { width: '24%', height: '16px', marginRight: '16px' },
          { width: '76%', height: '16px' }
        ]
      ]"
    >
      <view>加载完成的内容</view>
    </hy-skeleton>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(true)

setTimeout(() => {
  loading.value = false
}, 2000)
</script>

API

Skeleton Props

参数	说明	类型	默认值
theme	骨架图风格，可选值：text、avatar、paragraph、image	string	text
rowCol	用于设置行列数量、宽度高度、间距等	Array<number | SkeletonRowColObj | Array<SkeletonRowColObj>>	-
loading	是否为加载状态，为 true 时显示骨架屏，为 false 时显示实际内容	boolean	true
animation	动画效果，可选值：gradient（渐变）、flashed（闪烁），为空则无动画	string	-
customStyle	定义需要用到的外部样式	CSSProperties	-
customClass	自定义外部类名	string	-

Slots

插槽名	说明	接收值
default	加载完成时显示的内容	-

Typings

:::detail 类型说明

export type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image'
export type SkeletonAnimation = 'gradient' | 'flashed'
export type SkeletonRowColObj = {
    [key: string]: any
    type?: 'rect' | 'circle' | 'text'
    size?: string | number
    width?: string | number
    height?: string | number
    margin?: string | number
    background?: string
    marginLeft?: string | number
    marginRight?: string | number
    borderRadius?: string | number
    backgroundColor?: string
}
export type SkeletonRowCol = number | SkeletonRowColObj | Array<SkeletonRowColObj>
export type SkeletonThemeVars = {
    notifyPadding?: string
    notifyFontSize?: string
    notifyTextColor?: string
    notifyLineHeight?: number | string
    notifyDangerBackground?: string
    notifyPrimaryBackground?: string
    notifySuccessBackground?: string
    notifyWarningBackground?: string
}

:::

13:35