前端工程师经常需要在网页上实现滑动功能，而 jroll-infinite 是一个有用的 npm 包。jroll-infinite 能够支持无限滚动，且能够具有平滑滚动动画的特性。在本文中，我们将会介绍 jroll-infinite 的使用，包括安装、配置、及示例代码，以便让读者更好的了解此npm包的应用技巧。
安装
安装 jroll-infinite 很容易，只需在命令行窗口中输入以下命令即可：
$ npm install jroll-infinite --save
（注：假设您已经具有npm环境，如果没有，则需先安装npm）
配置
在安装 jroll-infinite 之后，您需要在 HTML 文件中引入该库。您可以使用以下方法之一来引入：
<!-- 如果您使用npm --> <script src="node_modules/jroll-infinite/dist/jroll-infinite.min.js"></script> <!-- 或者直接使用cdn --> <script src="https://cdn.jsdelivr.net/npm/jroll-infinite/dist/jroll-infinite.min.js"></script>
当引入 jroll-infinite 之后，您可以将其用于任何具有滑动需求的元素。
使用
接下来，让我们来看一下如何使用 jroll-infinite。首先，您需要为您的元素添加需要滚动的内容。在本示例中，我们创建一个 <ul> 元素。
<ul class="my-list"> <li>1</li> <li>2</li> <li>3</li> <!-- 省略其它内容... --> </ul>
接下来，您需要通过 jroll-infinite 的 API 来设置滚动属性并初始化 jroll-infinite。
-- -------------------- ---- -------
--- ----------------
----------
----------
----------
---- --------- ---
-----
--------
--- -------- - --- ----------------- -
--------------- ----
---
---------在上述的示例代码中，我们将 scrollInfinite 属性设置为 true，以支持无限滚动。如果您的元素宽度或高度不够滚动内部所需要展示的所有内容，您需要设置 scrollInfinite 属性以启用无限滚动。
有些情况下，您可能需要在无限滚动的过程中一次性展示多少数据。例如，您有一个包含 1000 条数据的列表，但是您只需要在滑动的过程中展示前 50 条数据。这时，您可以设置 infiniteLimit 属性来控制每次滚动加载多少数据。如下所示：
-- -------------------- ---- -------
--- ----------------
----------
----------
----------
---- --------- ---
-----
--------
--- -------- - --- ----------------- -
--------------- -----
-------------- --
---
---------在上述示例代码中，我们将 infiniteLimit 属性设置为 50，以每次滚动加载 50 条新数据。
示例代码
以下是一个完整的示例代码，旨在帮助您更好的了解如何使用 jroll-infinite。
-- -------------------- ---- -------
--------- -----
------
------
--------------------- ----------
----- ----------------
----- --------------- ---------------------------- -----------------
-------
-------- -
------- --- ----- -----
------- -----
----------- ------
--------- -----
-
-------- -- -
----------- --- ----- -----
-------- -----
-
--------
-------
------
--- ----------------
----------
----------
----------
----------
----------
----------
----------
----------
----------
-----------
-----------
-----------
-----------
-----------
-----------
-----------
-----------
-----------
-----------
-----------
-----
------- --------------------------------------------------------------------------------------
--------
--- -------- - --- ----------------- -
--------------- -----
-------------- -
---
---------
-------
-------在上述示例代码中，我们创建了一个包含20项内容的列表，并启用了无限滚动功能。同时，我们设置了每次滚动只加载5个新的数据。
总结
jroll-infinite 是一个用起来很方便的npm包，它支持无限滚动，且滚动具有平滑的动画效果。我们可以通过简单地设置一些属性和选项，便可轻松使用 jroll-infinite 在我们的网站内部添加滑动特效。如本文所述，您需要仔细了解 jroll-infinite 的几个属性，以及如何使用示例代码进行演示。我们相信，本文将能够帮助您在日后的前端开发工作中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8881e8991b448db476