Skeletons 骨架屏（新版） | 我的资料管理-uv-ui 是全面兼容vue3+2、nvue、app、h5、小程序等多端的uni-app生态框架

# Skeletons 骨架屏（新版）

✈

组件名：uv-skeletons

骨架屏一般用于页面在请求远程数据尚未完成时，在内容加载出来前展示与内容布局结构一致的灰白块，提升用户视觉体验。

新版骨架屏与老版本使用参数有很大的区别，所以才有了新版本，无法替换老版本。

新版骨架屏比老版本骨架屏更加灵活，理论上简单的左右上下布局结构均可以轻松实现，样式自由度较高，只要你会写css，推荐使用新版。

# 平台兼容性

App（vue）	App（nvue）	H5	小程序	VUE2	VUE3
√	√	√	√	√	√

注意事项

为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

由于vue和nvue的特性不同，组件动画在vue上为由左到右变化形式，在nvue上为明暗显隐的形式。

# 基本使用

该组件主要由 loading 和 skeleton 两个参数控制，骨架屏的具体内容由 skeleton 中的参数决定，这点非常重要，理论上只需要按照约定配置好该参数，就可以实现想要的结构，如下：

loading(必选)，是否加载中状态，如果为true则显示骨架屏组件占位，否则显示插槽中的内容
skeleton，数组形式 [Object,Object,...]。
- Object.type 类型，type的类型有多种见下方参数说明。实际上type的意义不大，除flex类型外（下面会是单独说明该用法），其他的类型都可以自定义任意样式，默认为line。
- Object.num 表示重复几个，默认为1。
- Object.gap 重复几个之间的垂直间隔，只有Object.num大于1才会生效，默认 20rpx。

<template>
	<view>
		<uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: true,
				skeleton: [{
					type: 'line',
					num: 3,
					gap: '20rpx'
				}]
			}
		}
	}
</script>

# 自定义样式

通过 skeleton 中的 style 参数，可以自定义样式。
- style 的类型可以是 array | string | object，示例中的代码都有体现，仅为演示示例，样式根据需求自定义。
- style 的array类型，例如：['height: 100rpx;',null,null]，代表第一个line高度为100rpx，其余的line使用默认样式。
- style 的string和object类型，实际上是一样的，都是设置3个line均使用设置的样式。

<template>
	<view>
		<uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: true,
				skeleton: [{
					type: 'line',
					num: 3,
					gap: '20rpx',
					style: ['width: 200rpx;marginBottom: 50rpx;', 'height: 100rpx;', 'width: 500rpx;'],
					// style: 'width: 200rpx;marginBottom: 50rpx;'
					// style: {width: '200rpx',marginBottom: '50rpx'}
				}]
			}
		}
	}
</script>

# 横向并列布局

通过 skeleton 中的参数 type 为 flex，可以实现横向并列布局。
Object.children 该参数的用法与上述一致。注意：children下不支持再有children
type 还有 avatar、custom 类型，下面示例可以看出。
- avatar类型，为了好理解，增加了头像类型，有自己的默认样式，实际上也可使使用style进行样式控制。
- custom类型，完全自定义样式的可以使用该类型，这样做的目的仅仅是为了好理解。

<template>
	<view>
		<uv-skeletons :loading="loading" :skeleton="skeleton"></uv-skeletons>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: true,
				skeleton: [{
					type: 'flex',
					num: 1,
					children: [{
						type: 'avatar',
						num: 1,
						style: 'marginRight: 10rpx;'
					}, {
						type: 'line',
						num: 3,
						gap: '30rpx',
						style: ['width: 200rpx;', null, 'width:400rpx;']
					}, {
						type: 'custom',
						num: 1,
						style: 'width: 200rpx;height:200rpx;marginLeft: 10rpx;'
					}]
				}]
			}
		}
	}
</script>

# 混合布局 + 插槽内容

可以通过插槽写入展示的内容，当请求结束，将loading设置为false，此时会隐藏骨架组件，同时展示插槽内容。
skeleton 参数还可以是一个 Number，表示上下之间的间距，单位为 rpx。30 代表上下之间的间距为 30rpx，示例如下：

<template>
	<view class="uv-page">
		<uv-skeletons :loading="loading" :skeleton="skeleton" :animate="animate">
			<view class="uv-skeletons__row uv-skeletons__row1">
				<view class="uv-skeletons__row1--left">
					<image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
				</view>
				<view class="uv-skeletons__row1--right">
					<uv-text text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5" color="#222" size="30rpx" lines="1"></uv-text>
					<uv-text text="在经过改进后全面支持vue3" color="#222" size="30rpx" lines="1" margin="6rpx 0 0"></uv-text>
					<uv-text text="欢迎大家使用" lines="1" color="#222" size="30rpx" margin="6rpx 0 0"></uv-text>
				</view>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="uv-skeletons__row uv-skeletons__row2">
				<image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/f9ae3d"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/5ac725"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/f56c6c"></image>
				<image class="img" src="https://via.placeholder.com/200x200.png/909399"></image>
			</view>
			<view style="height: 30rpx;"></view>
			<view class="uv-skeletons__row uv-skeletons__row3">
				<view class="uv-skeletons__row3--left">
					<uv-text text="uv-ui破釜沉舟之兼容vue3+2、nvue、app、h5、多端小程序的uni-app生态框架" color="#222" size="30rpx" bold lines="1"></uv-text>
					<uv-text text="大部分组件基于uView2.x，在经过改进后全面支持vue3，部分组件做了进一步的优化，支持单独导入，方便开发者选择导入需要的组件。" lines="1" color="#222" size="30rpx" margin="8rpx 0 0"></uv-text>
					<uv-text text="uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。我们会在部分组件下载时配置广告抵消一部分成本，希望大家理解。" lines="1" color="#222" size="30rpx" margin="8rpx 0 0"></uv-text>
				</view>
				<view class="uv-skeletons__row3--right">
					<image class="img" src="https://via.placeholder.com/200x200.png/3c9cff"></image>
				</view>
			</view>
		</uv-skeletons>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading: true,
				animate: true,
				skeleton: [{
						type: 'flex',
						num: 1,
						children: [{
							type: 'custom',
							num: 1,
							style: 'width:136rpx;height:136rpx;marginRight: 30rpx;'
						}, {
							type: 'line',
							num: 3,
							style: [null, 'width:360rpx;', 'width:200rpx;']
						}]
					},
					30, {
						type: 'flex',
						children: [{
							type: 'custom',
							style: 'width:98rpx;height:160rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}, {
							type: 'custom',
							style: 'width:98rpx;height:160rpx;marginLeft:50rpx;'
						}]
					},
					30, {
						type: 'flex',
						children: [{
							type: 'line',
							num: 3,
							gap: '30rpx'
						}, {
							type: 'custom',
							style: 'width:160rpx;height:160rpx;marginLeft: 30rpx;'
						}]
					}
				]
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uv-page {
		padding: 15px 30rpx 40px;
	}
	.uv-skeletons__row {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}
	.uv-skeletons__row1 {
		&--left {
			width: 136rpx;
			height: 136rpx;
			margin-right: 30rpx;
			.img {
				width: 136rpx;
				height: 136rpx;
			}
		}
		&--right {
			flex: 1;
		}
	}
	.uv-skeletons__row2 {
		justify-content: space-between;
		.img {
			width: 98rpx;
			height: 160rpx;
		}
	}
	.uv-skeletons__row3 {
		&--left {
			flex: 1;
		}
		&--right {
			.img {
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
</style>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Skeletons Props

参数	类型	默认值	说明
loading	Boolean	true	是否显示骨架
animate	Boolean	true	是否开启动画效果
skeleton	Array	[]	骨架内容，具体用法请看下方Skeleton Options参数说明

# Skeletons Options

该参数非常重要，该配置决定能不能正常显示骨架内容。该参数的格式为：[Object,Number]，Number值代表垂直间隔距离

属性名	说明
Object.type	骨架类型，组件内置了四种：line - 段落结构；avatar - 头像形状；flex - 并列，需要有children属性；custom - 自定义类型，理论上和line、avatar没区别，其实都可以完全自定义样式
Object.num	重复数量，`[{type:'line',num:3}]`意思是3个段落结构骨架
Object.gap	骨架下边距，`[{type:'line',num:3,gap: '30rpx'}]`意思是3个段落结构骨架的下边距均为`30rpx`。注意：只有Object.num大于1才会生效
Object.style	骨架样式，类型是Array/Object/String，Array依次对应重复骨架的样式，数组中也可使用Object/String；Object和String代表重复的骨架均用该样式。具体使用参考上述案例
Number	表示数组上一项和下一项的间隔距离，单位 `rpx`。上述示例有所体现：混合布局-插槽内容

注意

示例依赖了 uv-ui-tools uv-text 等多个组件，直接拷贝示例代码将无法正常运行。请到组件下载页面 (opens new window) ，在页面右侧选择使用 HBuilderX导入示例项目 。

← 测试占位图 Calendars 新版日历（推荐） →