作用 : 使用骨架加载可以有效的防止页面布局抖动,减少页面加载时的白屏时间。
原理 :
step 01. 使用预先规划基础骨架,骨架组件的插槽内放置加载后真实的元素内容;
step 02. 数据加载后延迟一些时间渲染真实元素;
gui-skeleton : GraceUI 组件目录/gui-skeleton.vue
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | ✔ |
属性名称 | 类型 | 默认值 | 作用 |
customClass | Array | ['gui-bg-white', 'gui-dark-bg-level3'] | 预占位骨架样式 |
customStyle | String | '' | 预占位骨架行内样式 |
delayTime | Number | 800 | 渲染延迟事件,单位毫秒 |
canShow | Boolean | true | 是否渲染实际内容 |