在前端开发中，我们经常需要处理有限的屏幕空间来展示大量数据。在这种情况下，我们通常会使用“下拉刷新”或“加载更多”等交互方式来让用户查看更多的数据。一个好用的 npm 包，pull-hang，可以让我们更加方便地实现这些功能。
安装
在使用 pull-hang 之前，您需要先在项目目录中安装该包。在终端中输入以下命令即可：
npm install pull-hang
基本使用
pull-hang 提供了两个组件：PullRefresh 和 InfiniteScroll。分别用于实现下拉刷新和加载更多功能。
下拉刷新
PullRefresh 组件是用于实现下拉刷新功能的。它接受一个函数作为参数，当下拉刷新时会调用该函数。
-- -------------------- ---- -------
------ - ----------- - ---- ------------
-------- ----------- -
-- ---------
-
-------- ------------- -
------ -
------------ ----------------------
------------
--------------
--
-上述代码中，我们定义了一个 onRefresh 函数，在下拉刷新时会被调用。然后将其传递给 PullRefresh 组件的 onRefresh 属性中，并将要显示的内容包裹在该组件内。
加载更多
InfiniteScroll 组件是用于实现加载更多功能的。它接受一个函数作为参数，当用户滚动到底部时会调用该函数。
-- -------------------- ---- -------
------ - -------------- - ---- ------------
-------- ------------ -
-- ---------
-
-------- ------------- -
------ -
--------------- ------------------------
----
--- --- ---
-----
-----------------
--
-上述代码中，我们定义了一个 onLoadMore 函数，在用户滚动到底部时会被调用。然后将其传递给 InfiniteScroll 组件的 onLoadMore 属性中，并将要显示的列表包裹在该组件内。
高级使用
除了基本功能之外，pull-hang 还提供了一些高级选项，可以让你更好地控制交互方式和样式。
选项
以下是可用的选项：
threshold: 触发下拉刷新或加载更多的阈值，默认为70。distanceToRefresh: 下拉刷新触发后刷新位置距离顶部的距离，默认为50。disablePull: 禁用下拉刷新，默认为false。disableInfinite: 禁用加载更多，默认为false。pullIcon: 自定义下拉刷新图标，默认为系统默认。loadingIcon: 自定义加载更多图标，默认为系统默认。pullText: 自定义下拉刷新提示文本。loadingText: 自定义加载更多提示文本。
-- -------------------- ---- -------
------ - ------------ -------------- - ---- ------------
-------- ----------- -
-- ---------
-
-------- ------------ -
-- ---------
-
-------- ------------- -
------ -
--
------------
---------------------
---------------
----------------------
--------------- -------------- ---
----------------
-
--- -- ---
--------------
---------------
-----------------------
---------------
------------------ -------------- ---
---------------------
-
--- -- ---
-----------------
---
--
-上述代码中，我们使用了 threshold 和 distanceToRefresh
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/51527