Skip to content

Skeleton 骨架屏 ​

用于在数据加载前展示占位内容,支持行数、动画、批量渲染与防抖动的节奏控制,避免界面闪烁。

基础用法(loading 与 default 插槽) ​

通过 loading 控制骨架显示与隐藏;当 loading=false 时,展示默认插槽的真实内容。

段落行数与首行 33% 宽度 ​

通过 rows 指定占位的行数;首行默认以 33% 宽度展示,更接近真实文本效果。

批量渲染列表骨架 ​

通过 count 批量渲染多条数据的占位。

动画开关 ​

通过 animated 控制是否展示闪烁动画。

防止渲染抖动(throttle) ​

有时接口返回很快,骨架刚显示真实数据就到,界面会“闪一下”。使用 throttle 控制骨架显示/消失的节奏,避免视觉抖动。

  • 传入 number 等价于 { leading: xxx },延迟骨架显示。
  • 传入 { trailing: xxx } 可延迟骨架消失。

综合示例(列表渲染) ​

结合 loading、rows、count 显示列表占位;加载完成后渲染真实数据。

Props ​

属性名说明类型可选值默认值
loading是否加载中(true 显示骨架,false 显示内容)boolean—true
rows段落(行)数量number—3
animated是否启用闪烁动画boolean—true
count批量渲染骨架的数量number—1
throttle防抖动节奏控制:number 等价于 { leading: xxx };支持 { trailing: xxx }number | object—0
firstLinePercent首行宽度百分比(0-100)number—33

Slots ​

插槽名说明
default加载完成时展示的真实内容