更新记录

1.0.0（2026-04-17）

v1.0.0：初始版本，支持基本骨架屏功能和多种动画效果
- v1.0.1：优化动画效果，添加波浪动画类型
- v1.0.2：添加margin相关props，简化样式定制

平台兼容性

uni-app(3.7.6)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	-	-	√	√	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	-	-	-	√	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
×	×	√

Skeleton Screen Pro

一个专业的骨架屏组件，用于在数据加载过程中显示占位效果，提升用户体验。

设计理念

骨架屏是一种在数据加载过程中显示的占位UI，它可以：

减少用户的等待焦虑感
提供视觉反馈，让用户知道内容正在加载
保持页面布局的稳定性，避免布局跳动
提升整体用户体验

本组件设计遵循以下原则：

简单易用：提供简洁的API，易于集成和使用
高度可定制：支持多种类型和样式的自定义
性能优化：动画效果流畅，不影响页面性能
响应式设计：适配不同屏幕尺寸

特性

支持多种骨架屏类型：圆形、矩形、文本、网格
支持自定义宽度、高度、背景颜色、动画效果
支持多种动画类型：微光(shimmer)、脉冲(pulse)、波浪(wave)
支持自定义边距和样式
遵循easycom规范，无需手动导入
响应式设计，适配不同屏幕尺寸
性能优化，动画流畅

安装

将组件目录 skeleton-screen-pro 复制到项目的 components 目录下即可。

使用示例

基本使用

<!-- 圆形骨架 -->
<skeleton-screen-pro type="circle" width="80px" height="80px"></skeleton-screen-pro>

<!-- 矩形骨架 -->
<skeleton-screen-pro type="rect" width="100%" height="100px" radius="8px"></skeleton-screen-pro>

<!-- 文本骨架 -->
<skeleton-screen-pro type="text" rows="3" firstLineWidth="80%"></skeleton-screen-pro>

<!-- 网格骨架 -->
<skeleton-screen-pro type="grid" count="4" width="100%"></skeleton-screen-pro>

自定义样式

<!-- 自定义背景颜色和动画 -->
<skeleton-screen-pro type="rect" width="100%" height="60px" bgColor="#e0e0e0" animation="pulse" radius="12px"></skeleton-screen-pro>

<!-- 自定义边距 -->
<skeleton-screen-pro type="rect" width="30%" height="120px" marginRight="5%"></skeleton-screen-pro>

高级使用场景

列表项骨架

<view v-for="i in 3" :key="i" class="list-item">
  <view class="list-avatar">
    <skeleton-screen-pro type="circle" width="50px" height="50px"></skeleton-screen-pro>
  </view>
  <view class="list-content">
    <skeleton-screen-pro type="rect" width="80%" height="20px" marginBottom="8px"></skeleton-screen-pro>
    <skeleton-screen-pro type="text" rows="2" firstLineWidth="90%"></skeleton-screen-pro>
  </view>
</view>

卡片式布局骨架

<view class="card">
  <skeleton-screen-pro type="rect" width="100%" height="150px" radius="12px" marginBottom="16px"></skeleton-screen-pro>
  <skeleton-screen-pro type="rect" width="60%" height="24px" radius="4px" marginBottom="12px"></skeleton-screen-pro>
  <skeleton-screen-pro type="text" rows="3" firstLineWidth="85%"></skeleton-screen-pro>
</view>

表单骨架

<view v-for="i in 4" :key="i" class="form-item">
  <skeleton-screen-pro type="rect" width="25%" height="20px" marginBottom="8px"></skeleton-screen-pro>
  <skeleton-screen-pro type="rect" width="100%" height="40px" radius="8px" marginBottom="20px"></skeleton-screen-pro>
</view>
<skeleton-screen-pro type="rect" width="100%" height="48px" radius="24px"></skeleton-screen-pro>

媒体内容骨架

<view class="media-grid">
  <skeleton-screen-pro type="rect" width="30%" height="120px" radius="8px" marginRight="5%"></skeleton-screen-pro>
  <skeleton-screen-pro type="rect" width="30%" height="120px" radius="8px" marginRight="5%"></skeleton-screen-pro>
  <skeleton-screen-pro type="rect" width="30%" height="120px" radius="8px"></skeleton-screen-pro>
</view>
<skeleton-screen-pro type="text" rows="4" firstLineWidth="95%"></skeleton-screen-pro>

参数说明

参数	类型	默认值	说明
type	String	'rect'	骨架屏类型：circle(圆形)、rect(矩形)、text(文本)、grid(网格)
width	String/Number	'100%'	宽度
height	String/Number	'20px'	高度
bgColor	String	'#f5f5f5'	背景颜色
animation	String	'shimmer'	动画类型：shimmer(微光)、pulse(脉冲)、wave(波浪)
rows	Number	3	文本行数（仅type为text时有效）
firstLineWidth	String	'80%'	第一行宽度（仅type为text时有效）
count	Number	4	网格数量（仅type为grid时有效）
radius	String/Number	'4px'	圆角
margin	String/Number	''	外边距
marginTop	String/Number	''	上边距
marginRight	String/Number	''	右边距
marginBottom	String/Number	''	下边距
marginLeft	String/Number	''	左边距
style	String/Object	{}	自定义样式

示例效果

基本类型

动画效果

高级场景

性能优化建议

合理使用骨架屏：只在数据加载时间较长的地方使用骨架屏，避免过度使用
减少嵌套层级：尽量减少骨架屏组件的嵌套层级，提高渲染性能
优化动画效果：对于性能较低的设备，可以选择简单的动画类型如pulse
避免过度定制：过度的自定义样式可能会影响性能，建议使用组件提供的默认样式
合理设置大小：根据实际内容大小设置骨架屏的尺寸，避免过大或过小

浏览器兼容性

支持所有现代浏览器
支持uni-app框架的所有平台（H5、小程序、App）
在低版本浏览器中，动画效果可能会有所简化

常见问题解答

Q: 骨架屏不显示怎么办？

A: 请检查以下几点：

确保组件目录结构正确，遵循easycom规范
检查组件的type、width、height等参数是否正确设置
确保父容器有足够的空间显示骨架屏

Q: 动画效果不流畅怎么办？

A: 可以尝试以下解决方案：

选择更简单的动画类型，如pulse
减少页面中骨架屏的数量
确保设备性能良好

Q: 如何自定义骨架屏的样式？

A: 可以通过以下方式自定义：

使用组件提供的props（如bgColor、radius等）
使用margin相关的props设置边距
使用style属性传入自定义样式对象

Q: 如何在数据加载完成后隐藏骨架屏？

A: 可以通过v-if或v-show指令控制骨架屏的显示和隐藏，例如：

<skeleton-screen-pro v-if="loading" type="rect" width="100%" height="100px"></skeleton-screen-pro>
<view v-else>加载完成的内容</view>

贡献指南

如果您发现任何问题或有改进建议，欢迎提交Issue或Pull Request。

提交代码前请确保：

代码符合项目的代码风格
测试了所有功能
更新了相关文档

联系方式

如有任何问题或建议，欢迎通过以下方式联系我们：

项目地址：https://github.com/yourusername/skeleton-screen-pro
邮箱：your@email.com

许可证

本组件采用MIT许可证，详情请查看LICENSE文件。

版本历史

v1.0.0：初始版本，支持基本骨架屏功能和多种动画效果
v1.0.1：优化动画效果，添加波浪动画类型
v1.0.2：添加margin相关props，简化样式定制

骨架屏专业版Pro uni-app skeleton skeleton-screen loading placeholder