更新记录

1.0.0（2025-10-27） 下载此版本

Features

• 初始版本发布
• 支持 6 种骨架屏类型（list、card、chart、avatar、text、image）
• 支持自定义行数
• 支持显示/隐藏头像
• 支持开启/关闭动画
• 流畅的渐变扫光动画
• 深色主题适配
• 全平台兼容（H5、微信小程序、App等）
• 纯 CSS 实现，零性能损耗

平台兼容性

uni-app(3.6.12)

其他

Neo Skeleton - 骨架屏组件

轻量级、高性能的骨架屏组件，提供多种预设样式，适用于各种加载场景。

特性

• 6种预设类型（列表、卡片、图表、头像、文本、图片）
• 流畅的渐变扫光动画
• 灵活配置：支持自定义行数、头像、动画等
• 开箱即用，无需复杂配置
• 深色主题适配
• 纯 CSS 实现，零性能损耗

平台兼容性

安装

方式一：通过 DCloud 插件市场（推荐）

1. 在 DCloud 插件市场 搜索 neo-skeleton
2. 点击右侧 使用 HBuilderX 导入插件
3. 在项目中直接使用

方式二：手动导入

1. 下载组件代码
2. 将 neo-skeleton 文件夹复制到项目的 uni_modules 目录下
3. 重启项目即可使用

快速开始

基础用法

<template>
  <view>
    <!-- 列表骨架屏 -->
    <neo-skeleton type="list" :rows="3" />
  </view>
</template>

完整示例

<template>
  <view class="page">
    <!-- 加载状态 -->
    <neo-skeleton v-if="loading" type="list" :rows="5" />

    <!-- 实际内容 -->
    <view v-else class="content">
      <!-- 你的内容 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  onLoad() {
    // 模拟数据加载
    setTimeout(() => {
      this.loading = false
    }, 2000)
  }
}
</script>

使用示例

1. 列表骨架屏

适用于列表、新闻、评论等场景

<template>
  <view>
    <!-- 带头像的列表 -->
    <neo-skeleton type="list" :rows="3" :avatar="true" />

    <!-- 不带头像的列表 -->
    <neo-skeleton type="list" :rows="5" :avatar="false" />
  </view>
</template>

效果预览：

• 支持显示/隐藏头像
• 可自定义行数
• 每行包含标题和描述

2. 卡片骨架屏

适用于商品卡片、内容卡片等场景

<template>
  <view>
    <neo-skeleton type="card" />
  </view>
</template>

效果预览：

• 包含图片区域
• 包含标题和内容区域

3. 图表骨架屏

适用于图表、数据可视化等场景

<template>
  <view>
    <neo-skeleton type="chart" />
  </view>
</template>

效果预览：

• 柱状图样式
• 5个不同高度的柱状

4. 头像骨架屏

适用于用户头像、头像列表等场景

<template>
  <view class="avatar-list">
    <neo-skeleton type="avatar" />
    <neo-skeleton type="avatar" />
    <neo-skeleton type="avatar" />
  </view>
</template>

效果预览：

• 圆形头像占位

5. 文本骨架屏

适用于文章、段落等场景

<template>
  <view>
    <neo-skeleton type="text" :rows="4" />
  </view>
</template>

效果预览：

• 多行文本占位
• 最后一行宽度 80%

6. 图片骨架屏

适用于图片加载占位

<template>
  <view>
    <neo-skeleton type="image" />
  </view>
</template>

效果预览：

• 矩形图片占位

7. 无动画版本

适用于性能敏感场景

<template>
  <view>
    <neo-skeleton type="list" :rows="3" :animated="false" />
  </view>
</template>

API 文档

Props

类型说明

list - 列表骨架屏

<neo-skeleton 
  type="list" 
  :rows="5" 
  :avatar="true"
  :animated="true"
/>

card - 卡片骨架屏

<neo-skeleton type="card" />

chart - 图表骨架屏

<neo-skeleton type="chart" />

avatar - 头像骨架屏

<neo-skeleton type="avatar" />

text - 文本骨架屏

<neo-skeleton 
  type="text" 
  :rows="4"
/>

image - 图片骨架屏

<neo-skeleton type="image" />

样式定制

自定义颜色

如果需要自定义骨架屏颜色，可以通过 CSS 变量覆盖：

<template>
  <view class="custom-skeleton">
    <neo-skeleton type="list" />
  </view>
</template>

<style>
.custom-skeleton {
  /* 自定义背景颜色 */
  --skeleton-bg: rgba(255, 255, 255, 0.1);
  --skeleton-highlight: rgba(255, 255, 255, 0.2);
}
</style>

最佳实践

1. 与真实内容保持一致

骨架屏的结构应该与实际内容结构相似：

<template>
  <view>
    <!-- 加载中：列表骨架屏 -->
    <neo-skeleton v-if="loading" type="list" :rows="5" :avatar="true" />

    <!-- 加载完成：真实列表 -->
    <view v-else class="list">
      <view v-for="item in list" :key="item.id" class="list-item">
        <image class="avatar" :src="item.avatar" />
        <view class="content">
          <text class="title">{{ item.title }}</text>
          <text class="desc">{{ item.desc }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

2. 合理使用动画

在列表较长时，建议关闭动画以提升性能：

<neo-skeleton 
  type="list" 
  :rows="20" 
  :animated="false"
/>

3. 分块加载

对于复杂页面，可以分块显示骨架屏：

<template>
  <view>
    <!-- 顶部卡片 -->
    <neo-skeleton v-if="loading" type="card" />

    <!-- 中间图表 -->
    <neo-skeleton v-if="loading" type="chart" />

    <!-- 底部列表 -->
    <neo-skeleton v-if="loading" type="list" :rows="5" />
  </view>
</template>

常见问题

1. 骨架屏不显示动画？

确保 :animated="true" 并检查是否有样式冲突。

2. 如何自定义骨架屏样式？

可以通过外层容器的 CSS 来覆盖样式，或直接修改组件源码。

3. 支持暗色模式吗？

组件默认适配深色主题，浅色主题可通过 CSS 变量自定义。

更新日志

见 changelog.md

许可证

MIT License