UniApp 组件 · 实验
UGSkeleton 骨架屏
用于加载阶段结构预览的骨架屏。
组件预览
以下画面来自同一组件源码的 H5 构建，用于检查内容、状态和主题；MP-WEIXIN 最终外观仍以开发者工具和真机为准。
使用方式
配置 easycom 后直接使用 <ug-skeleton>，无需在页面脚本中导入组件。
vue
<template>
<ug-space direction="vertical" size="sm" block align="stretch">
<ug-skeleton height="32rpx" />
<ug-skeleton width="72%" height="24rpx" radius="round" />
<ug-skeleton height="112rpx" radius="surface" />
</ug-space>
</template>
easycom 公开入口：@ug666/ui-uniapp/components/ug-skeleton/ug-skeleton.vue
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | string | number | '100%' | 占位宽度，数字按 rpx 处理。 |
| height | string | number | '32rpx' | 占位高度，数字按 rpx 处理。 |
| radius | 'control' | 'surface' | 'round' | string | number | 'control' | 圆角预设或平台长度。 |
| animated | boolean | true | 是否使用统一 Loading 动效。 |
事件
当前组件没有公开事件。
注意事项
- Skeleton 只作为加载占位，不承载真实文字。
- Provider motion=reduced 或系统减少动效偏好会停止脉冲动画。
平台边界
总览中的画面来自同一组件源码的 H5 构建，只用于辅助浏览；小程序真实外观仍以 Demo 在微信开发者工具和真机中的结果为准。
MP-WEIXIN 已编译
开发者工具与真机待验证