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

介绍

Github 开源地址

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

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

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

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

示例

  • 官方 Example 示例项目

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

    sg.xjq.icu

  • 掘金首页列表示例

使用

项目中使用遵循以下流程

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

Example 中的用户列表是一个完整的使用案例可供参考 github.com/xjq7/skelet...

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

chrome 插件

下载 skeleton-generator.zip 并解压

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

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

成功加载之后

demo 页面为例子

找到需要生成的组件容器

输入到 插件 popup 面板里

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

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

点击复制获取骨架数据

悬浮控制台

在 html 文件 head 标签中添加 script

如下:

html 复制代码
<!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 按钮

按钮功能介绍

找到需要生成的组件容器

设置面板输入容器选择器

随后点击预览查看效果

相关推荐
小救星小杜、2 分钟前
a = b &&c 的含义
开发语言·前端·javascript
uhakadotcom3 分钟前
Babylon.js:轻松打造Web 3D体验
前端·javascript·面试
parade岁月5 分钟前
告别代码质量隐患:Husky 生态工具链在前端工程化中的实战应用
前端·javascript
小成C5 分钟前
为什么会演化出RSC,SSR和RSC关系大解密
前端·react.js
过期的H2O26 分钟前
【H2O2 | 软件开发】Axios发送Http请求
前端·http·axios·交互
bug总结12 分钟前
vue3 public下引入图片路径打包后线上不显示问题解决
前端·javascript·vue.js
悠然青年帅15 分钟前
基于Vue+Canvas实现的画板绘画以及保存功能
前端
蚝油菜花16 分钟前
Deep Research Web UI:开源版Deep Research!接入DeepSeek一键生成深度研究报告,可视化检索过程
人工智能·开源
screct_demo18 分钟前
详细讲一下 Webpack 主要生命周期钩子流程(重难点)
前端·webpack·node.js
小妖66619 分钟前
vue2的webpack(vue.config.js) 怎么使用请求转发 devServer.proxy
javascript·vue.js·webpack