Skelenator 是一个开源的 JavaScript 库，它可以帮助开发者快速生成网页的骨架屏。如果你不知道什么是骨架屏，可以先看看这个示例网站，这是哔哩哔哩网站的骨架屏。
本文将详细介绍如何使用 Skelenator 进行网页骨架屏的生成。
安装和引入 Skelenator
Skelenator 可以通过 npm 进行安装，使用以下命令：
npm install --save skelenator
之后就可以在项目中引入 Skelenator：
import Skelenator from 'skelenator';
使用 Skelenator
生成骨架屏需要先定义骨架屏的区域和样式。以下是一个简单的 HTML 结构：
-- -------------------- ---- -------
---- ----------------------
---- -------------------
---- ------------------
---- ----------------
---- -------------------
---- -------------------
---- -------------------
------
---- ----------------------
---- ---------------------
------骨架屏的样式需要定义在 CSS 文件中，可以通过简单的 CSS 规则来实现：
-- -------------------- ---- ------- ----------------- - ----------------- -------- - --------- - ----------------- ----- - ----- - ------ ------ ------- ----- - ---- - ------ ----- ------- ----- - -------- - -------- ----- ---------- ----- - ----- - ------ ----- ------- ------ - -------- - ------ ------ ------- ------ - ------- - ------ ----- ------- ----- -
接下来可以通过 Skelenator 的方法来生成骨架屏。以下是生成骨架屏的代码：
const skelenator = new Skelenator({
wrapperId: 'skeleton-wrapper', // 骨架屏容器的 ID
skeletonClass: 'skeleton', // 骨架屏的 CSS 类名
});
skelenator.generateSkeleton(); // 生成骨架屏使用以上代码生成的骨架屏将会和刚刚定义的 HTML 结构和 CSS 样式匹配。
配置项
在 Skelenator 的生成骨架屏方法中，可以通过传入配置项来实现更多定制化的功能。
wrapperId
- 类型：string
- 类型：必填
设置骨架屏容器的 ID。
skeletonClass
- 类型：string
- 必填：可选
- 默认值：skeleton
设置骨架屏的 CSS 类名。可以通过自定义 CSS 类名来实现更多样式的定义，同时需要在生成骨架屏方法中传入相应的 CSS 类名。
lineWidth
- 类型：number
- 可选
- 默认值：6
设置骨架屏的线条宽度。
lineColor
- 类型：string
- 可选
- 默认值：#eeeeee
设置骨架屏的线条颜色。
lineHeight
- 类型：number
- 可选
- 默认值：15
设置骨架屏的线条高度。
radius
- 类型：number
- 可选
- 默认值：3
设置骨架屏边框的圆角半径。
showLoading
- 类型：bool
- 可选
- 默认值：false
设置是否开启 loading 效果。如果开启，则会在骨架屏区域显示 loading 动画，直到页面内容加载完毕。
loadingStyle
- 类型：object
- 可选
设置 loading 动画的样式。
例如：
-- -------------------- ---- -------
----- ---------- - --- ------------
---------- -------------------
-------------- -----------
------------ -----
------------- -
------ -------
---------- --
----------- ------
----------- ------
--
---以上代码中，loading 动画被设置为一组五个圆圈，圆圈大小为 8px，线条高度为 5px，颜色为 #333。
结语
Skelenator 是一个很实用的库，可以帮助前端开发者快速生成骨架屏。本文详细介绍了 Skelenator 的安装和使用，以及常用的配置项。希望可以对你有所帮助！完整示例代码如下：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- ------------
-------
------
---- ----------------------
---- -------------------
---- ------------------
---- ----------------
---- -------------------
---- -------------------
---- -------------------
------
---- ----------------------
---- ---------------------
------
------- --------------------------
-------
--------- -------------------- ---- ------- ----------------- - ----------------- -------- ------- ----- -------- ----- - --------- - ----------------- ----- -------------- ---- - ----- - ------ ------ ------- ----- - ---- - ------ ----- ------- ----- - -------- - -------- ----- ---------- ----- - ----- - ------ ----- ------- ------ - -------- - ------ ------ ------- ------ - ------- - ------ ----- ------- ----- -
-- -------------------- ---- -------
------ ---------- ---- -------------
----- ---------- - --- ------------
---------- -------------------
-------------- -----------
-- ---
---------- ---
---------- -------
----------- ---
------- ---
------------ -----
------------- -
------ -------
---------- --
----------- ------
----------- ------
--
---
------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005579781e8991b448d4980