uv-ui

# Skeleton 骨架屏

✈

组件名：uv-skeleton

点击下载&安装 (opens new window)

骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。

说明

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

# 平台兼容性

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

# 基本使用

组件由标题，段落和头像组件组件，其中段落需要通过rows参数配置才显示，可以通过title和avatar是否显示标题和头像 。
该组件的使用，有几个需要注意的点，如下：

  • title(可选)，是否显示标题占位行，该占位行不布满全屏宽度，同时与段落的距离较大以做明显区分，默认为true
  • avatar(可选)，是否在左上角位置显示圆形的头像占位区域
  • rows(可选)，段落的行数
  • loading(必选)，是否加载中状态，如果为true则显示骨架屏组件占位，否则显示插槽中的内容

数据请求完成后，将loading设置为false，会隐藏骨架组件

<template>
	<uv-skeleton rows="3" title loading></uv-skeleton>
</template>

# 加载中动画

设置animate为true，加载中的骨架块将会有一个动画效果，用以加强视觉效果。

<uv-skeleton :loading="true" :animate="true"></uv-skeleton>

# 显示头像

<uv-skeleton :loading="true" avatar rows="1"></uv-skeleton>

# 插槽内容

可以通过插槽写入展示的内容，当请求结束，将loading设置为false，此时会隐藏骨架组件，同时展示插槽内容。

<template>
	<uv-skeleton rows="2" :loading="loading" avatar :title="false">
		<text>loading为false时，将会展示此处插槽内容</text>
	</uv-skeleton>
</template>
<script>
	export default {
		data() {
			return {
				loading: true
			}
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false
			}, 2000)
		}
	}
</script>

# 完整示例

完整示例下载地址

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

# API

# Skeleton Props

参数 说明 类型 默认值 可选值
loading 是否显示骨架占位图，设置为false将会展示子组件内容 Boolean true true | false
animate 是否开启动画效果 Boolean true true | false
rows 段落占位图行数 Number | String 0 -
rowsWidth 段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 String | Array | Number 100% -
rowsHeight 段落的高度 String | Array | Number 18 -
title 是否展示标题占位图 Boolean true true | false
titleWidth 标题的宽度 String | Number 50% -
titleHeight 标题的高度 String | Number 18 -
avatar 是否展示头像占位图 Boolean false true | false
avatarSize 头像占位图大小 String | Number 32 -
avatarShape 头像占位图的形状，circle-圆形，square-方形 String circle circle | square

← LoadingIcon 加载动画 →