主题
Skeleton 骨架屏
根据目标节点的位置绘制加载占位区域,也可使用预先准备的节点数据。
支持平台
以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| outerClass | String | 骨架区域外层的 class 名称 | fui-skeleton |
| selector | Array | 要生成占位的节点 class;名称包含 round 时绘制圆形 | ['fui-round', 'fui-rect'] |
| background | String | 骨架区域背景 | transparent |
| preloadList | Array | 预先准备的节点数据;非空时不再动态查询节点 | [] |
| active | Boolean | 是否启用动画 | true |
| theme | String | 主题,可选 light、dark | light |
| immediate | Boolean | 页面内使用时是否初始化后立即显示 | true |
| component | Boolean | 是否在自定义组件中使用;需手动调用方法 | false |
方法
通过组件引用调用 shown(instance) 显示骨架;在自定义组件内使用时,按目标平台要求传入实例以查询节点。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| change | 动态查询节点后触发 | { nodes } |
平台说明
nvue 不能动态获取节点,需提供 preloadList;不同平台的动画和主题支持范围请以官网为准。本地源码包含 nvue 原生透明度动画,实际表现需在目标设备核对。
插槽
| 插槽 | 说明 |
|---|---|
| — | 官网未列出该组件的插槽 |