Skeleton 骨架屏

在数据加载过程中显示的占位图，提供更好的用户体验。常用于列表、文章等数据加载场景。

代码示例

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="skeleton骨架屏">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<zk-skeleton :rowsWidth="600" />
		</zk-theme>

		<!-- 显示头像 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="显示头像" />
			<zk-skeleton :avatar="true" :rows="3" :rowsWidth="600" />
		</zk-theme>

		<!-- 方形头像 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="方形头像" />
			<zk-skeleton :avatar="true" avatar-shape="square" :rows="3" :rowsWidth="600" />
		</zk-theme>

		<!-- 自定义段落宽度 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义段落宽度" />
			<zk-skeleton :title="true" :rows="3" :rows-width="[450, 500, 550]" />
		</zk-theme>

		<!-- 关闭动画 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="关闭动画" />
			<zk-skeleton :animate="false" :avatar="true" :rows="3" :rowsWidth="600" />
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" />
			<zk-skeleton background-color="#f59685" :avatar="true" :rows="3" :rowsWidth="600" />
		</zk-theme>

	</zk-theme>
</template>

<script>
	export default {
		data() {
			return {}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	.skeleton-content {
		display: flex;
		align-items: flex-start;
		padding: 20rpx;
	}

	.skeleton-avatar {
		width: 80rpx;
		height: 80rpx;
		background-color: #f2f3f5;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.skeleton-info {
		flex: 1;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.skeleton-content {
		flex-direction: row;
		align-items: flex-start;
		padding: 20rpx;
	}

	.skeleton-avatar {
		width: 80rpx;
		height: 80rpx;
		background-color: #f2f3f5;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.skeleton-info {
		flex: 1;
		flex-direction: column;
	}

	/* #endif */
</style>

API

Props 属性

参数	说明	类型	默认值
loading	是否显示骨架屏	boolean	true
title	是否显示标题占位图	boolean	true
title-width	标题占位图宽度	string / number	50%
avatar	是否显示头像占位图	boolean	false
avatar-size	头像占位图大小	string / number	80
avatar-shape	头像形状，可选值：circle / square	string	circle
paragraph	是否显示段落占位图	boolean	true
rows	段落占位图行数	number	3
rows-width	段落占位图宽度，可传数组分别设置每行宽度	array / string / number	100%
animate	是否开启动画	boolean	true
background-color	骨架屏背景色，支持主题配置，优先级：props > theme > 默认值	string	#f2f3f5

Slots 插槽

名称	说明
default	骨架屏结束后显示的内容

主题定制

组件支持通过主题配置来统一定制骨架屏的样式：


// 在 store 中配置
{
    theme: {
        current: {
            skeletonBg: '#f2f3f5',    // 骨架屏背景色
            skeletonAnim: '#e5e6eb'   // 动画色值
        }
    }
}