前言
前端开发需要大量使用第三方库来提升开发效率，而 npm 包是我们常用的第三方库管理工具。在这些包当中，ember-zbj-infinite-scroller 是一个非常受欢迎的无限滚动组件库，今天我们来详细讲解一下如何使用这个库。
什么是 ember-zbj-infinite-scroller？
ember-zbj-infinite-scroller 是一个无限滚动组件库，它可以实现在滚动到页面底部时自动加载更多数据，从而实现类似下拉刷新的效果。这个库可以轻松地在 Ember.js 框架内使用，提供了丰富的配置选项，支持加载 loading 动画，支持在滚动区域内调用加载函数等。
安装和配置
首先，我们需要在项目中安装 ember-zbj-infinite-scroller 包。在命令行工具中输入以下命令：
$ npm install --save-dev ember-zbj-infinite-scroller
安装完成后，我们需要在应用程序的 app.js 中添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ------------------------------
-------------------------------
----- ------------------------------
------------ -
-----------------------------------
-
---这个操作会在你的应用程序中注册一个 infinite-scroller 组件和一个 infinite-scroll 组件。
接下来，我们需要对 infinite-scroll 组件进行配置，我们可以利用其提供的属性来控制其工作方式：
-- -------------------- ---- -------
------------------
----------------------------- ---------------
-------------------------
------- ----- -- --------
-----------------------
---------
---- ------------------- ------------------- ---- ------------- -- -----------
-------------------
------
--------------------在这个模板中，我们使用了 infinite-scroll 组件，并设置了其属性 onScrolledToThreshold 和 isLoading。前者指定了在滚动到底部时调用的回调函数，而后者则指示是否正在加载更多数据。
回调函数与数据加载
最后，我们需要提供一个回调函数供 infinite-scroll 组件之调用。这个回调函数应该执行实际的数据加载操作，并在加载数据完成之后将 isLoadingData 属性设置为 false 。
-- -------------------- ---- -------
-------- -
-------------- -
------------------------- ------
------ ------------------------ -
----- -----------------
------ -----------------
--------------- -- -
----------------- -------------------------------------------
---------------- ---------------- - ---
------------------------- -------
---
-
-示例代码
完整的示例代码如下：
js
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------------- ---- ------------------------------
-------------------------------
----- ------------------------------
------------ -
-----------------------------------
-
---
------ ------- -------------------------
----- --
------ ---
-------------- ------
-------- -
-------------- -
------------------------- ------
------ ------------------------ -
----- -----------------
------ -----------------
--------------- -- -
----------------- -------------------------------------------
---------------- ---------------- - ---
------------------------- -------
---
-
-
---handlebars
-- -------------------- ---- -------
------------------
----------------------------- ---------------
-------------------------
------- ----- -- --------
-----------------------
---------
---- ------------------- ------------------- ---- ------------- -- -----------
-------------------
------
--------------------总结
ember-zbj-infinite-scroller 是一个非常实用的无限滚动组件库。通过本篇文章，我们了解了 ember-zbj-infinite-scroller 的基本用法，并提供了一个完整的示例代码。相信这些内容能够帮助你更好地使用这个组件库，提升你的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1da563576b7b1eccfa