什么是 infinite-loading
infinite-loading 是一个开源的 npm 包，其可以帮助开发者实现无限滚动加载，从而提高界面的用户体验。它可以用于 Vue、React、Angular 等多种前端框架的项目中，同时也支持自定义主题以及支持多种语言。
无限滚动加载是一种特殊的翻页方式，用户不需要点击按钮或者翻页的链接就可以一直滚动查看更多内容。这个功能可以在新闻类网站，社交应用中具有很好的应用场景。
使用 infinite-loading 包可以方便地为项目添加无限滚动加载这一功能，节省了开发者的工作量和时间，同时也提高了项目的可维护性和代码的健壮性。
如何使用 infinite-loading
首先，我们需要在项目目录下通过 npm 安装 infinite-loading 包，方法如下：
npm install infinite-loading --save
然后我们就可以在需要使用无限滚动加载的组件中引入它，添加我们自定义的无限滚动加载选项并且配置主题。下面是一个简单的 Vue 组件的实现：
-- -------------------- ---- -------
----------
-----
---- ----------- -- ----- ----------------------- ---------- --------
----------------- --------------------------- --------------------------------------
------
-----------
--------
------ --------------- ---- -------------------
------ ------- -
----------- -
---------------
--
------ -
------ -
----- ---
-------- ------
----- --
----------- --
-
--
--------- -
-------------------
--
-------- -
------------- -
-- ---------- -- ---------------- -
-------
-
------------ - -----
------------- -- -
--- ---- - - -- - - --- ---- -
----------------
--- ------------------------------------ ---
------ ----- -- ---- ------------------ - ---
---
-
------------ - ------
------------
-- ------
--
----------------------- -
-------------------
----------------
-
-
-
---------上面的代码逻辑是很简单的，在 mounted() 生命周期里获取初始列表数据，然后根据用户滚动行为通过 getNextPage() 方法动态加载更多数据。当滚动到页面底部时，InfiniteLoading 组件就会触发 infiniteHandler($state) 方法并自动添加加载动画。我们在 infiniteHandler($state) 方法里使用 $state.loaded() 方法来告诉组件我们数据已经获取成功。同时，我们可以在 infiniteLoading 中自定义加载动画的样式，代码如下：
-- -------------------- ---- -------
-------
----------------------------- -
--------- ------
---- ----
----- ----
---------- --------------- ------
------ -----
------- -----
----------------- ------
-------------- ----
-
------------------------------------ -
--------- ---------
------ -----
------- -----
---- --
----- --
-
------------------------------------ ---------
------------------------------------ -------- -
------ -----
------- -----
----------------- --------
-------------- ----
--------- ---------
---- -----
---------- --------------------------- -- -------- ------------
-
------------------------------------ -------- -
----- -----
---------------- ----
-
---------- --------------------------- -
--- ---- ---- -
---------- -----------
- --- -
---------- -----------
-
-
--------infinite-loading 的指导意义
使用 infinite-loading 包可以方便地为前端项目添加无限滚动加载功能，提高用户体验和操作便利性。同时，infinite-loading 也是一个开源的 npm 包，可以根据项目需求进行二次开发和优化。开发者可以通过阅读源码和文档，学习其优秀的代码设计与实现，进而提高自己的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005708981e8991b448e7edd