关于骨架屏的最佳实践

周大侠啊
  • 234

想问一下大家在实际工作中,实际项目中,关于骨架屏的方案,使用的是什么呢?
1、图片
2、插件
3、手写静态页面

不限于以上几个,欢迎讨论。

回复
阅读 1.8k
4 个回答

最佳实践,就是手写(致敬波神)

首先我认为下面三种方式都不太合我意
1、图片
2、插件
3、手写静态页面

我的解决方案是通过 css 来实现,有个伪元素不知道你有没有使用过
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:empty

在数据回来之前我们可以将container的子元素选择不挂载,这样container的empty伪元素就起作用的

<div class="container">
    <div v-if="data"></div>
</div>

下面是实现一个骨架屏的css代码,这是一种在逻辑代码中高度解耦的最好方式,不知道你今天博学了没有

.card:empty {
  background-image: radial-gradient(circle 20px, #ccc 100%, transparent),
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ccc, #ccc),
    linear-gradient(#ffffff, #ffffff);
  background-size: 48px 48px, 60px 20px, 100px 20px, 100% 100%;
  background-position: 50% 24px, 50% 100px, 50% 150px, 0 0;
  background-repeat: no-repeat;
}

具体效果见下图
image.png

最佳实践,就是手写。

分组件时,各自写各自的。只需要多写一个样式即可。

做为没有写过骨架屏的人,上来不负责的推荐一个工具:Creator of React Content Loader
是基于 Svg 实现的。应该是属于楼主所描述方案中的“图片”。

image.png

推荐手写。
写页面的时候按照骨架屏小组件来布局,只写一份样式就ok。
图片不推荐,插件太复杂。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏