前言
在前端开发中，常常需要进行页面滚动时的操作，比如无限滚动加载数据、滚动到页面底部时显示一些提示信息等。@npm-polymer/iron-scroll-threshold 包提供了一种方便的方法来实现这些需要。其主要依赖于 Polymer 3.x，但也可以与其他框架集成使用。在本篇文章中，我们将详细介绍如何使用 @npm-polymer/iron-scroll-threshold 包来实现页面滚动加载功能。
安装依赖
首先，我们需要安装 @npm-polymer/iron-scroll-threshold 包。可以使用 npm 或者 yarn 进行安装：
npm install --save @npm-polymer/iron-scroll-threshold
或者
yarn add @npm-polymer/iron-scroll-threshold
导入依赖
在代码中导入依赖并注册组件：
-- -------------------- ---- -------
------ --------------------------------------------------------------
----- ----------- ------- --------------- -
------ --- ---------- -
------ -------------
----------------------
--------------------------
------------------------------------
-
-- ---------- -------
------------------------
--
-
----------------- -
-- ---- ---- ----
-
-在上面的示例中，我们在 Polymer 组件中导入了 @npm-polymer/iron-scroll-threshold 包，并注册了 iron-scroll-threshold 组件。接着，在组件模板中添加了 iron-scroll-threshold 组件，并设置了 lower-trigger-offset 和 on-lower-threshold 属性用来控制加载更多数据的逻辑。lower-trigger-offset 属性用来设置触发加载更多数据的距离阈值，on-lower-threshold 属性用来监听滚动事件并触发加载逻辑。
使用示例
下面的示例展示了如何使用 @npm-polymer/iron-scroll-threshold 包来实现无限滚动加载更多数据的功能：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ ---------------
------- ------------- ------------------------
-------
------
--- -----------
--------- --------------- ------------------
-----------------
-----------
-----
-------
--------- -------------------- ---- -------
------ --------------------------------------------------------------
----- -------------- ------- --------------- -
------ --- ------------ -
------ -
------ -
----- ------
------ -- -- ---
--
------ -
----- -------
------ ---
--
---------- -
----- -------
------ ---
--
---------- -
----- --------
------ ------
--
--
-
------ --- ---------- -
------ -------------
-------
------- -
----------- -------
-
--------
----------------------
--------------
--------------------------
------------------------------
-
--- -----------
--------- --------------- ------------------
-----------------
-----------
-----
------------------------
---- ------------
-------------- ---------------------------------------
------
--
-
------------------- -
--------------------------
-----------------
-
----------- -
-- --------------- -- ---------- -- ------------------ -------
-------------- - -----
------------- -- -
--- ---- - - -- - - --------------- ---- -
----- ---- - ----- ------------------- - ----
------------------ ------
-
-------------- - ------
---------------------------------
-- ------
-
-
---------------------------------------- ----------------在上述示例中，我们创建了一个名为 InfiniteScroll 的组件，在组件中声明了需要使用的属性。items 存储数据列表，count 用来控制加载数据的总数，batchSize 表示每次加载的数据数量，isLoading 用来防止重复加载数据。接着，我们在组件模板中添加了 iron-scroll-threshold 组件，并使用 iron-scroll-threshold 组件的属性提供了加载更多数据的逻辑。当用户滚动到 iron-scroll-threshold 组件指定距离后，会触发 on-lower-threshold 事件，此时 _loadMore 方法会被调用，向 items 数组中添加表示每个新条目的项目。在 _loadMore 方法中，我们模拟了一段延迟，并将添加的新数据 push 到 items 数组中。随着用户滚动到页面底部并触发加载更多数据操作，我们使用以下语句来禁用 iron-scroll-threshold 组件：
this.$.threshold.clearTriggers();
总结
在本篇文章中，我们介绍了如何使用 @npm-polymer/iron-scroll-threshold 包来实现页面滚动加载数据的功能。我们通过引入 iron-scroll-threshold 组件，并使用 lower-trigger-offset 和 on-lower-threshold 属性来控制数据加载逻辑。最后，我们给出了完整的使用示例，希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff281e8991b448ddb59