V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
liutao1998
V2EX  ›  分享创造

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

  •  
  •   liutao1998 · 188 天前 · 1322 次点击
    这是一个创建于 188 天前的主题,其中的信息可能已经有所发展或是发生改变。

    介绍

    Github 开源地址

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

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

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

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

    示例

    • 官方 Example 示例项目

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

      https://sg.xjq.icu

    • 掘金首页列表示例

      image.png

    使用

    项目中使用遵循以下流程

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

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

    按钮功能介绍

    找到需要生成的组件容器

    设置面板输入容器选择器

    随后点击预览查看效果

    3 条回复    2024-06-26 10:02:20 +08:00
    zhj0326
        1
    zhj0326  
       186 天前
    「骨架屏预览时长」写死的话体验就不好了...可能页面已经加载完毕了,骨架屏还没有消失。
    liutao1998
        2
    liutao1998  
    OP
       186 天前
    @zhj0326 这里是开发过程中配置的预览时长,实际生产页面里根据请求时间来关闭骨架屏
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2533 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 10:34 · PVG 18:34 · LAX 02:34 · JFK 05:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.