WSkeleton 骨架屏组件

A2UI Protocol JSON Schema

骨架屏组件，基于 WinDesignNext Skeleton 封装，在内容加载过程中展示占位动画，loading 为 false 时切换为实际内容。

基础用法

内置段落骨架模式，通过 loading path 控制加载状态：

自定义骨架结构

通过 children 引用 WSkeletonItem 自定义占位布局：

{
  "id": "custom_skeleton",
  "component": "WSkeleton",
  "loading": { "path": "/pageLoading" },
  "animated": true,
  "children": ["sk_image", "sk_title", "sk_text"],
  "child": "patient_content"
}

[
  { "id": "sk_image", "component": "WSkeletonItem", "variant": "image" },
  { "id": "sk_title", "component": "WSkeletonItem", "variant": "h3" },
  { "id": "sk_text", "component": "WSkeletonItem", "variant": "text" }
]

API

WSkeleton

属性	类型	默认值	说明
component	string	WSkeleton	组件类型（必填）
animated	boolean	false	是否启用动画
count	number | DataBindingValue	1	骨架重复次数
rows	number | DataBindingValue	3	内置模式段落行数
loading	boolean | DataBindingValue	true	是否显示骨架屏
throttle	number	—	loading 切换节流(ms)
children	string[]	—	WSkeletonItem 子组件 ID
child	string	—	加载完成后展示的内容

WSkeletonItem

属性	类型	默认值	说明
component	string	WSkeletonItem	组件类型（必填）
variant	string	text	占位类型

variant 可选值

值	说明
text / p	文本行
h1 / h3	标题
caption	说明文字
button	按钮
image	图片
circle	圆形
rect	矩形

path 支持说明

属性	path 支持	说明
loading	✅	Agent 可通过 updateDataModel 切换加载状态
count	✅	动态骨架重复次数
rows	✅	动态段落行数

loading 动态控制

{
  "version": "v0.9",
  "updateDataModel": {
    "surfaceId": "main",
    "path": "/pageLoading",
    "value": false
  }
}

注意事项

• WSkeletonItem 必须作为 WSkeleton 的 children 使用
• 未配置 children 时使用内置 rows 段落骨架
• child 对应加载完成后的实际内容（default 插槽）