library_jxt_skeleton

背景

在页面数据尚未加载前，页面通常处于长时间的空白状态，特别时网速较低时更为明显。

骨架屏能够在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，填充好本应该展现的内容，给人一种创造即时转换的错觉。能够降低用户的焦灼情绪，又能使界面加载过程变得自然通畅，不会造成网页长时间白屏或者闪烁。

组件说明

骨架屏使用Ant Design Vue中的Skeleton 组件，并结合平台特性进行一些调整，给用户更好的使用体验。

以下是骨架屏组件配置分组及说明。

骨架屏配置

| 配置名称 | 类型 | 默认值 | 备注 | | -------------- | ------- | ------ | --------------------------------------------------------------------------------- | | 动画效果 | Boolean | false | 设置骨架屏是否显示动画效果 | | 内容是否加载中 | Boolean | false | 设置内容是否正在加载中。值为true时显示骨架屏；值为false时显示骨架插槽中的内容 |

头像配置

| 配置名称 | 类型 | 默认值 | 备注 | | ------------------ | ------------ | ------ | -------------------------------------------------- | | 是否显示头像占位图 | Boolean | false | 设置骨架屏中是否显示头像占位图 | | 头像占位图的大小 | 小|正常|大 | 正常 | 设置头像占位图的大小，仅当设置显示头像占位图时有效 | | 头像的形状 | 圆形|方形 | 圆形 | 设置头像的形状，仅当设置显示头像占位图时有效 |

标题配置

| 配置名称 | 类型 | 默认值 | 备注 | | ------------------ | ------- | ------ | -------------------------------------------------- | | 是否显示标题占位图 | Boolean | true | 设置是否显示标题占位图 | | 标题占位图的宽度 | String | - | 设置标题占位图的宽度，仅当设置显示标题占位图时有效 |

段落配置

| 配置名称 | 类型 | 默认值 | 备注 | | ------------------------ | ------- | ------ | ---------------------------------------------------------- | | 是否显示段落占位图 | Boolean | true | 设置是否显示段落占位图 | | 段落占位图的行数 | Number | 3 | 设置段落占位图的行数，仅当设置显示段落占位图时有效 | | 段落最后一行占位图的宽度 | String | 61% | 设置段落最后一行占位图的宽度，仅当设置显示段落占位图时有效 |

使用示例

使用按钮模拟数据的加载状态，切换骨架屏的显隐。

1. 创建页面，在页面中实现如下图所示的布局。

2. 在骨架屏插槽内拖入需要展示的内容，此处拖入卡片。

注：可以不使用骨架屏的插槽，通过绑定给骨架屏内容是否加载中的变量控制内容的显隐，此时可在样式 tab 对骨架屏的样式进行调整。

3. 调整卡片布局及内容如下图所示。

4. 添加局部变量loading，默认值为true。同时给切换骨架屏显隐按钮添加点击事件，切换变量loading的值。

5. 配置骨架屏，使其与内容结构一致。将内容是否加载中绑定为loading变量的值，设置骨架屏显示动画效果，设置骨架屏显示头像占位图，设置骨架屏段落行为 1 行。

6. 预览应用，点击按钮模拟数据加载中与加载完成，即可看到相应效果。