示例1 - 基本段落骨架屏
<template>
	<view class="container">
		<u-skeleton type="paragraph" :rows="3" loading></u-skeleton>
	</view>
</template>

示例2 - 卡片式骨架屏
<template>
	<view class="container">
		<u-skeleton type="card" loading></u-skeleton>
	</view>
</template>

示例3 - 列表式骨架屏
<template>
	<view class="container">
		<u-skeleton type="list" loading></u-skeleton>
	</view>
</template>

示例4 - 自定义主题
<template>
	<view class="container">
		<u-skeleton type="paragraph" :rows="3" theme="dark" loading></u-skeleton>
	</view>
</template>

示例5 - 控制加载状态
<template>
	<view class="container">
		<button @click="toggleLoading">切换加载状态</button>
		<u-skeleton type="paragraph" :rows="3" :loading="isLoading"></u-skeleton>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

const toggleLoading = () => {
	isLoading.value = !isLoading.value
}
</script>

示例6 - 自定义骨架屏
<template>
	<view class="container">
		<u-skeleton :loading="isLoading" type="custom">
			<view class="custom-skeleton">
				<view class="avatar"></view>
				<view class="content">
					<view class="title"></view>
					<view class="desc"></view>
				</view>
			</view>
		</u-skeleton>
	</view>
</template>

<style lang="less">
.custom-skeleton {
	display: flex;
	align-items: center;
	padding: 16rpx;
	
	.avatar {
		width: 64rpx;
		height: 64rpx;
		background-color: #e9e9e9;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	
	.content {
		flex: 1;
		
		.title {
			width: 40%;
			height: 24rpx;
			background-color: #e9e9e9;
			border-radius: 4rpx;
			margin-bottom: 12rpx;
		}
		
		.desc {
			width: 70%;
			height: 16rpx;
			background-color: #e9e9e9;
			border-radius: 4rpx;
		}
	}
}
</style>

组件属性说明
属性名	类型	默认值	说明
loading	Boolean	true	是否显示骨架屏
type	String	‘paragraph’	骨架屏类型：‘paragraph’, ‘card’, ‘list’, ‘custom’
rows	Number	3	段落骨架屏的行数
theme	String	‘primary’	主题：‘primary’, ‘dark’, ‘light’
lineWidth	Number	100	段落线宽度百分比

特点说明
动画效果：内置平滑的闪烁动画，提升用户体验
多种预设类型：支持段落卡片、列表等常见场景
自定义主题：提供三种主题色适应不同场景
插槽自定义：通过插槽实现完全自定义骨架屏
响应式设计：自适应不同屏幕尺寸
微信小程序优化：符合小程序规范，性能优异

注意事项
小程序中 <style> 标签内的 @keyframes 会被提取到全局，确保动画名称唯一
自定义骨架屏时，建议添加与预设相似的动画样式
复杂骨架屏性能可能受影响，建议控制骨架屏复杂度
加载完成后记得将 loading 设为 false