Skeleton 骨架屏，在需要等待加载内容的位置提供一个占位图形组合。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

手动传入数据

通过 preloadList 属性传入骨架数据，outerClass 属性设置外层class值。

<view class="wui-outer">
	<!--手动绘制数据-->
	<wui-skeleton outerClass="wui-outer" :preloadList="preloadList"></wui-skeleton>
</view>

  //手动绘制数据，比较繁琐。可通过动态查找节点，然后通过change事件返回节点数据缓存使用
const preloadList = ref<any>([
    {
        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',
    },
]);
const show = ref<any>(true);
onReady(() => {
    setTimeout(() => {
        show.value = false;
    }, 2000);
});
const change = e => {
    //返回查找的骨架节点信息，可在开发环境中获取缓存到本地，然后直接用于生产环境
    //nvue端暂不支持动态获取节点，可考虑缓存节点数据直接传入使用
    console.log(e.nodes);
};

.wui-outer {
	width: 100%;
	height: 300rpx;
	position: relative;
}

动态生成骨架节点

通过 v-if 控制骨架显示隐藏，background 属性设置骨架背景色，outerClass 属性设置外层容器class值，@change 事件在查找节点完成后触发并返回所有节点数据。

<view class="wui-wrap">
	<view class="wui-sk__box wui-rect">骨架节点</view>
	<view class="wui-sk__wrap wui-round">骨架节点</view>
	<!--查找骨架节点 wui-rect、wui-round-->
	<wui-skeleton v-if="show" background="#F1F4FA" outerClass="wui-wrap" @change="change"></wui-skeleton>
</view>

.wui-sk__box {
	width: 100%;
	height: 300rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.wui-sk__wrap {
	background: #16AB60;
	color: #fff;
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 40rpx auto;
}

//属性 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端获取并缓存节点数据直接传入使用

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
outerClass	String	外层容器class值，如果局部骨架，元素需设置相对定位	wui-skeleton	-
selector	Array	骨架元素class值，包含round表示处理成圆形，其他为矩形	['wui-round', 'wui-rect']	-
background	String	骨架屏背景色	transparent	-
preloadList	Array	骨架屏数据，如果传入数据则不会动态获取节点信息，nvue端必传属性	[ ]	-
active	Boolean	是否展示动画效果	true	nvue端不支持
theme	String	骨架主题，可选值：light、dark	light	nvue端不支持

Events

注意：nvue端暂不支持

事件名	说明	回调参数
@change	查找节点完成后触发	{ nodes:节点数据 }