前言
如果你是一个 Web 前端开发人员，那么你应该已经听说过 ember-infinite-scroll 这个 npm 包了。它是一款非常好用的插件，可以在滚动时自动加载更多内容，非常适合实现无限滚动功能的 web 应用。本文将介绍如何使用 ember-infinite-scroll，希望对你有所帮助。
安装
要使用 ember-infinite-scroll，我们首先需要安装它。打开命令行工具，进入你的项目目录，然后执行以下命令：
npm install --save ember-infinite-scroll
这样就会在你的项目中安装 ember-infinite-scroll 插件了。
使用
安装完成后，我们需要在 app.js 或者 Controller 中使用它。在查看指南之前我们需要先创建出一些假数据作为例子。我们可以创建一个 posts 数组，用假数据填充：
-- -------------------- ---- ------- ----- ----- - - - ------ --------- ------ ---- -- -- - ------ --------- ------ ---- -- -- - ------ --------- ------ ---- -- -- - ------ --------- ------ ---- -- -- - ------ --------- ------ ---- -- -- - ------ --------- ------ ---- -- -- - ------ --------- ------ ---- -- -- --
然后在模板中添加这个标志吧：
{{#infinite-scroll-container onScrolled=(action 'loadMorePosts') as |container|}}
{{#each posts as |post|}}
<div class="post">{{post.title}}</div>
{{/each}}
{{container.loadingText}}
{{/infinite-scroll-container}}现在我们需要添加一个 loadMorePosts 方法，来处理滚动事件。你需要把这个方法添加到 controller 中：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
------------ -----
------ ------
-------- -
--------------- -
-- ------------------------- -
-- ---- ---- ---- ----
-
-
-
---现在，我们要加载更多数据了。实际上，我们只需要修改 controller 中的 loadMorePosts 方法，当它被触发时，再去加载更多的数据来填充 posts 数组。让我们来修改一下这个方法：
-- -------------------- ---- -------
------ ---------- ---- --------------------
------ ------- -------------------
------------ -----
------ ------
-------- -
--------------- -
-- ------------------------- -
-- ------ ----- ----
-------------------------------
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
---
-
-
-
---现在我们已经完成了所有的工作。重启你的 Ember 应用程序，并查看无限滚动是否生效。当你滑动到底部时，你应该会看到新的内容被动态加载出来。
总结
ember-infinite-scroll 插件的使用非常简单。只需要几步操作，就可以实现一个功能齐全的无限滚动页面。如果想要更深入的探究，可以查看 npm 上的在线文档，进一步了解它的配置和使用方法。
示例代码
-- -------------------- ---- -------
------ ---------- ---- --------------------
----- ----- - -
- ------ --------- ------ ---- -- --
- ------ --------- ------ ---- -- --
- ------ --------- ------ ---- -- --
- ------ --------- ------ ---- -- --
- ------ --------- ------ ---- -- --
- ------ --------- ------ ---- -- --
- ------ --------- ------ ---- -- --
--
------ ------- -------------------
------------ -----
------ ------
-------- -
--------------- -
-- ------------------------- -
-------------------------------
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
- ------ ----- -------- ------ ---- -- --
---
-
-
-
---{{#infinite-scroll-container onScrolled=(action 'loadMorePosts') as |container|}}
{{#each posts as |post|}}
<div class="post">{{post.title}}</div>
{{/each}}
{{container.loadingText}}
{{/infinite-scroll-container}}来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb32