Skeleton 骨架屏 
概述
Skeleton 骨架屏，在需要等待加载内容的位置提供一个占位图形组合。
# 支持平台
| App-vue | App-Nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
温馨提示
Nvue下暂不支持动态获取骨架节点信息，需要手动传入骨架数据。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面中引用、注册
import fuiSkeleton from "@/components/firstui/fui-skeleton/fui-skeleton.vue"
export default {
components:{
fuiSkeleton
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：easycom组件规范
传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
First UI easycom配置请查看 快速上手。
如果不了解easycom，可先查看 官网文档 (opens new window)。
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。
手动传入数据
通过 preloadList 属性传入骨架数据，outerClass 属性设置外层class值。
注意：如果在局部使用骨架屏，外层容器设置relative相对定位；如果整个页面使用则将组件放置页面根目录。
<view class="fui-outer">
<!--手动绘制数据-->
<fui-skeleton outerClass="fui-outer" :preloadList="preloadList"></fui-skeleton>
</view>
1
2
3
4
2
3
4
data() {
return {
//手动绘制数据，比较繁琐。非nvue端可通过动态查找节点，然后通过change事件返回节点数据缓存使用
preloadList: [{
left: 15,
top: 10,
bottom: 220,
width: 40,
height: 40,
type: 'round'
}, {
left: 60,
right: 365,
top: 10,
bottom: 220,
width: 180,
height: 19,
type: 'rect'
}, {
left: 60,
right: 365,
top: 40,
bottom: 220,
width: 240,
height: 19,
type: 'rect'
}, {
left: 60,
right: 365,
top: 70,
bottom: 220,
width: 200,
height: 19,
type: 'rect'
}]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.fui-outer {
width: 100%;
height: 300rpx;
position: relative;
}
1
2
3
4
5
2
3
4
5
动态生成骨架节点
通过 v-if 控制骨架显示隐藏，background 属性设置骨架背景色，outerClass 属性设置外层容器class值，@change 事件在查找节点完成后触发并返回所有节点数据。
注意：nvue端暂不支持，动态获取节点必须设置并传入节点class值，详见属性selector。
<view class="fui-wrap">
<view class="fui-sk__box fui-rect">骨架节点</view>
<view class="fui-sk__wrap fui-round">骨架节点</view>
<!--查找骨架节点 fui-rect、fui-round-->
<fui-skeleton v-if="show" background="#F1F4FA" outerClass="fui-wrap" @change="change"></fui-skeleton>
</view>
1
2
3
4
5
6
2
3
4
5
6
.fui-sk__box {
width: 100%;
height: 300rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
}
.fui-sk__wrap {
background: #16AB60;
color: #fff;
width: 200rpx;
height: 200rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 40rpx auto;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| outerClass | String | 外层容器class值，如果局部骨架，元素需设置相对定位 | fui-skeleton | - |
| selector | Array | 骨架元素class值，包含round表示处理成圆形，其他为矩形 | ['fui-round', 'fui-rect'] | - |
| background | String | 骨架屏背景色 | transparent | - |
| preloadList | Array | 骨架屏数据，如果传入数据则不会动态获取节点信息，nvue端必传属性 | [ ] | - |
| active | Boolean | 是否展示动画效果 | true | nvue端不支持 |
| theme | String | 骨架主题，可选值：light、dark | light | nvue端不支持 |
| immediate V2.1.0+ | Boolean | 组件初始化完成后是否立即显示骨架，仅在页面中使用(component为false)且preloadList为空时有效 | true | nvue端不建议修改属性 |
| component V2.1.0+ | Boolean | 是否在自定义组件内使用，需要调用shown方法显示骨架 | false | nvue端不支持 |
注意
由于小程序端页面中可能无法直接获取到自定义组件内的骨架节点，所以组件做了优化，支持将骨架屏组件放入自定义组件内使用，需要注意的是H5等部分平台支持页面中直接获取到自定义组件内的骨架节点，所以使用时需注意做好区分。
//属性 preloadList 骨架屏数据 格式说明
//以下为约定属性
[{
//元素left值，单位px
left: 60,
//元素right值，单位px
right: 365,
//元素top值，单位px
top: 70,
//元素bottom值，单位px
bottom: 220,
//元素宽度，单位px
width: 200,
//元素高度，单位px
height: 19,
//元素显示形状，可选值：round（圆形）、rect（矩形）
type: 'rect'
}]
//特别说明：
//骨架节点信息，可在开发环境中获取缓存到本地，然后直接用于生产环境
//nvue端暂不支持动态获取节点，可考虑在非nvue端获取并缓存节点数据直接传入使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Events
注意：nvue端暂不支持
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @change | 查找节点完成后触发 | { nodes:节点数据 } |
# Methods
通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，通过 this.$refs.XXX 访问到对应的组件实例，并调用上面的实例方法。
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| shown V2.1.0+ | 查找骨架节点，显示骨架，自定义组件中使用（属性component为true）时务必调用方法并传入组件实例 | instance：自定义组件实例，如xxx.shown(this) |
示例预览
# 示例代码地址
VIP内容代码请查看订单页下载的组件库示例源码。# 特别说明
该组件为付费组件，UNI-APP版VIP用户可免费使用 。