什么是 shinjs
shinjs 是一个帮助开发者快速创建优秀的全屏滚动网页的 JavaScript 库。它提供了一系列可自定义的效果，并且能够兼容各种设备和浏览器。此外，shinjs 做得很轻量，只有 1.6KB。
安装
通过 npm 安装 shinjs：
--- ------- ------
使用
在 HTML 中引入 shin.js 文件：
------- -------------------------------
然后在 JavaScript 中，使用以下代码初始化 shinjs：
--- -------
这将初始化一个默认的 shinjs 实例。
自定义配置
shinjs 提供了一些自定义配置选项，你可以在初始化实例的时候传递这些选项。例如：
--- ------ ----------------- --------------- -- --- ----- ------ -------------- ------------- ---------- -- ---------- ------ -------------- -------- -- --------- ------- ------- ------- -- -------- ------ --------- ------- -- -------- ------ ----------- ------ -- ---------- ---- ----------- ----- -- ----------- ---- --------- ----- -- ------------ ---- ---------- ---------- -- -------- ---------- ---
shinjs API
除了可自定义的选项之外，shinjs 还提供了以下 API：
go(index)
跳转到指定索引的段落。
----------- -- ------------ - -----
next()
跳转到下一个段落。
------------
prev()
跳转到上一个段落。
------------
on(eventName, callback)
为 shinjs 注册事件监听器。
----------------------- --------------- - ------------------- -- ------ ------- ---
支持的事件包括：
- beforeChange（在切换到指定段落之前触发）
- afterChange（在切换到指定段落之后触发）
- beforeRender（在 shinjs 实例初始化完成，开始渲染之前触发）
- afterRender（在 shinjs 实例初始化完成，渲染完成之后触发）
示例代码
--------- -----
----- ----------
------
----- ----------------
------------- ------------
-------
---------- -
----------------- -----
-
---------- -
----------------- -----
-
---------- -
----------------- --------
-
--------
-------
------
---- ------------------- -----------------
---- ------------------- -----------------
---- ------------------- -----------------
------- -------------------------------
--------
--- ------
----------------- ---------------
-------------- --------
----------- ------
----------- ----
---
---------
-------
-------以上代码创建了一个包含三个段落的全屏滚动网页。shinjs 定义了各个段落的样式，因此我们不用额外设置样式。其中的 shin-section 样式名与自定义配置中的 sectionClassName 要保持一致。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66959