2024 年最好的骨架屏食用方式，你值得拥有

爱意满满的作品展示区。

This topic created in 728 days ago, the information mentioned may be changed or developed.

介绍

Github 开源地址

在开发低代码平台物料的时候, 如果每个组件使用单一 loading ，整个配置化的页面用户体验不太好

单独去开发的话，这么多组件费时费力，所以调研了下自动生成方案的可行性

最终通过解析开发中的 mock 页生成每个组件的骨架屏，经过多个示例以及公司项目实践

生成的骨架屏完全贴合实际页面骨架结构，极大地提升了用户体验与开发效率

示例

官方 Example 示例项目

一个带有骨架屏效果的 example 页

https://sg.xjq.icu
掘金首页列表示例

使用

项目中使用遵循以下流程

开发的页面或组件完善并保存 mock 数据
在 mock 数据下显示的静态页上预览骨架屏
复制骨架数据结合骨架屏组件即是完整骨架屏

Example 中的用户列表是一个完整的使用案例可供参考 https://github.com/xjq7/skeleton-generator/tree/main/packages/example/user-info/user-list

下面是两种不同的接入使用方式

chrome 插件

下载 skeleton-generator.zip 并解压

chrome 浏览器中进入 chrome://extensions/

点击加载已解压的扩展程序, 选中解压的 skeleton-generator 目录

成功加载之后

以 demo 页面为例子

找到需要生成的组件容器

输入到插件 popup 面板里

这里使用的是 class, 所以最终选择器输入框填 .ED4JZ8zZvzWhoef_o6xc

在页面中右键点击 skeleton-generator 插件选项中的预览查看效果

点击复制获取骨架数据

悬浮控制台

在 html 文件 head 标签中添加 script

如下:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Skeleton-generator example</title>
    <!-- 直接加载 skgen.toolkit.js 文件 -->
    <script src="https://image.xjq.icu/2024/6/22/1718990007203_skgen.toolkit.js" defer></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

在页面右下角自动加载 toolkit 按钮