SxsnWechat/components/CusSkeleton

示例1 - 基本段落骨架屏

<view class="container">
    <u-skeleton type="paragraph" :rows="3" loading></u-skeleton>
</view>

示例2 - 卡片式骨架屏

<view class="container">
    <u-skeleton type="card" loading></u-skeleton>
</view>

示例3 - 列表式骨架屏

<view class="container">
    <u-skeleton type="list" loading></u-skeleton>
</view>

示例4 - 自定义主题

<view class="container">
    <u-skeleton type="paragraph" :rows="3" theme="dark" loading></u-skeleton>
</view>

示例5 - 控制加载状态

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

示例6 - 自定义骨架屏

<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>

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

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

注意事项 小程序中