前言
在前端开发中，实现滚动加载非常常见。为了方便开发者使用，Better-Scroll 团队开发了一个名为 @better-scroll/pull-up 的 npm 包，用于实现滚动加载功能。本文将介绍如何使用该 npm 包实现滚动加载功能。
安装
使用 npm 包管理工具安装包时，需要在终端中运行以下命令：
npm install @better-scroll/pull-up
引入
安装后，在需要使用的页面中引入 @better-scroll/pull-up：
import BScrollPullUp from '@better-scroll/pull-up'
创建 BetterScroll 对象
在创建 BetterScroll 对象时，在 options 中添加 pullUpLoad 选项，代码示例如下：
const betterScroll = new BScroll(wrapper, {
pullUpLoad: true
})监听“触底”事件
使用 @better-scroll/core 中的 pullingUp 事件可以监听到“触底”事件，代码示例如下：
betterScroll.on('pullingUp', function () {
// TODO: 加载新数据
})结束加载
在新数据加载完毕后，需要调用 @better-scroll/core 中的 finishPullUp 方法来结束加载，代码示例如下：
betterScroll.finishPullUp()
配置项
在使用 @better-scroll/pull-up 时，可以自定义一些配置项。配置项代码示例如下：
const betterScroll = new BScroll(wrapper, {
pullUpLoad: {
threshold: 50,
stop: 20
}
})threshold
threshold 用来设置“触底”时底部距离 BetterScroll 视口的距离，当底部距离视口小于 threshold 时，会触发“触底”事件。默认为 0。
stop
stop 用来设置结束加载时底部距离 BetterScroll 视口的距离，当底部距离视口小于 stop 时，停止加载。默认为 0。
示例
-- -------------------- ---- -------
------ ------- ---- ---------------------
------ ------------- ---- ------------------------
-- ----
------ ---------------------------------------------
----- ------- - ----------------------------------
--- ----- - -
----- ------------ - --- ---------------- -
----------- -
---------- ---
----- --
-
--
---------------------------- -------- -- -
------------- -- -
--- ---- - - -- --- - --- - -- ---- ---- -
----- -- - ----------------------------
------------ - ----- -----------
-------------------------------------------
-
---------------------------
-- -----
--总结
@better-scroll/pull-up 是一个非常方便的滚动加载库，使用它创建一个滚动加载组件非常简单。通过本文的学习，相信你已经了解了它的使用方法。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6e9999a9b7065299ccb9f7