更新记录

1.0.0（2026-07-21） 下载此版本

v1.0.0 初始版本：支持骨架屏加载占位、头像/标题/多行组合、shimmer 动画开关、圆角/主题色定制；默认插槽承载真实内容，加载完成后自动切换。

平台兼容性

qsl-skeleton 骨架屏加载占位组件

纯前端、零依赖的骨架屏（Skeleton）加载占位组件。列表、详情页、卡片等数据未返回时，用它占位并展示流光动画，体验优于空白或转圈。

• ✅ 零依赖、零后端、零 Key，装完即用
• ✅ 支持头像 / 标题 / 多行占位组合
• ✅ shimmer 流光动画可开关
• ✅ 圆角、胶囊形、主题色可定制
• ✅ H5 / 微信小程序 / App（vue3）全平台

安装

通过 HBuilderX 导入插件，或把 uni_modules/qsl-qsl-skeleton 目录拷贝进你的项目 uni_modules/ 即可。

基础用法

<template>
  <qsl-qsl-skeleton :loading="loading" :rows="3" :avatar="true" :title="true" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
const loading = ref(true)
onMounted(() => {
  // 模拟数据返回后关闭骨架
  setTimeout(() => (loading.value = false), 2000)
})
</script>

配合真实内容（推荐）

用默认插槽承载真实内容，加载完成后自动切换：

<qsl-qsl-skeleton :loading="loading" :rows="3" :avatar="true" :title="true">
  <view class="real-content">
    <image class="ava" :src="data.avatar" />
    <view class="info">
      <view class="name">{{ data.name }}</view>
      <view class="desc">{{ data.desc }}</view>
    </view>
  </view>
</qsl-qsl-skeleton>

Props

事件

平台兼容

H5、微信小程序、App（vue3）均已验证。

注意事项

• 组件不依赖任何第三方库，直接放入 uni_modules 即可使用。
• 主题色通过 bg 调整；如需深色模式适配，自行在业务层切换 bg 值即可。