介绍
@better-scroll/pull-down 是一款基于 BetterScroll 插件的下拉刷新插件，它允许绑定在 BScroll 实例上，提供下拉刷新的功能。
安装
@better-scroll/pull-down 可以通过 npm 安装，使用以下命令：
npm install @better-scroll/pull-down --save
其中，--save 参数表示将安装包添加到项目依赖中。
使用
创建 BScroll 实例
首先，需要创建一个 BScroll 实例。以下是一个简单的创建范例：
-- -------------------- ---- -------
---- ----------------
---- ----------------
----
--------------
--------------
--------------
--------------
--------------
--------------
--------------
--------------
--------------
---------------
---------------
---------------
-----
------
-------- -------------------- ---- -------
------ ------- ---- ---------------------
------ -------- ---- --------------------------
----- ------- - ----------------------------------
----- ------ - --- ---------------- -
-------- -
--------
--
---------------- -----
----------------------- -
---------- ---
----- --
-
--添加下拉刷新
添加下拉刷新需要在 BScroll 实例的 options 中添加 pullDownRefresh 参数，并将其设置为 true，同时设置 pullDownRefreshOptions 参数进行更详细的配置。
-- -------------------- ---- -------
----- ------ - --- ---------------- -
-------- -
--------
--
---------------- -----
----------------------- -
---------- ---
----- --
-
--以上代码创建了一个 BScroll 实例，将 pullDownRefresh 参数设置为 true 表示添加了下拉刷新功能，而 pullDownRefreshOptions 参数则可以进一步配置应当触发下拉刷新的阈值（threshold）和刷新时距顶部的距离（stop）。
添加事件响应
在配置完成后，需要为下拉刷新添加“开始”和“结束”时的响应事件，如下所示：
-- -------------------- ---- -------
------------------------ -----------
-- ------------------
-----------------------
--
------------------- -------- ----- -
-- ------ - --- -
----------------------- - ------
- ---- -
----------------------- - ------
-
--scroll.on('pullingDown', function(){...}) 用于配置下拉刷新“开始”时的响应事件，在此函数内部一般会调用接口从服务器请求最新数据，并更新页面显示，完成后应该在函数体末调用 scroll.finishPullDown() 来告知 BetterScroll 下拉刷新已经刷新完毕。
而 scroll.on('scroll', function(){...}) 则是用于添加滚动时的响应事件，通常用于实现“释放刷新”这样的显示效果。
示例
详见 demo
总结
@better-scroll/pull-down 是一款实用性极高、易于集成、高度自定义的下拉刷新插件，因此成为众多前端开发者的首选。尤其是在移动开发领域中应用广泛，其追求的自然的滚动体验在多数情况下可以大大提升应用的用户满意度，同时增加了用户的黏着度。期望今后在更多的应用场景中得到投入使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6e9999a9b7065299ccb9f6