在前端开发中，我们经常需要实现下拉刷新和上拉加载更多的功能。使用 vue-drapload-person，可以方便地实现这些功能。
安装
使用 npm 安装 vue-drapload-person。
$ npm i vue-drapload-person
使用
在你的 Vue 组件中，导入 vue-drapload-person 并注册为组件。
import VueDraploadPerson from 'vue-drapload-person'
export default {
components: {
VueDraploadPerson
}
}然后，在模板中使用 <vue-drapload-person> 标签。
-- -------------------- ---- -------
----------
-----
-------------------- -------------------- ---------------------- -----------------------
---- ------------- ------ -- ------ --------------- ---- --------
----------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ --
-
--
-------- -
-------------- -
-- ---- - ---------- - ----------
-- -------
-- -- --------------------------------------------- ----
-
-
-
---------使用 loadData 方法来加载数据。type 参数为当前加载的类型，可以是 'pullDown' 或 'loadMore'。
在 loadData 方法中调用 this.$refs.vueDraploadPerson.finishLoad(type) 来结束加载。注意，当数据全部加载完毕时，需要禁用下拉刷新和上拉加载更多的功能。可以通过将 enablePullDown 和 enableLoadMore 属性设为 false 来实现。
示例代码
-- -------------------- ---- -------
----------
-----
-------------------- -------------------- ---------------------- -----------------------
---- ------------- ------ -- ------ --------------- ---- --------
----------------------
------
-----------
--------
------ ----------------- ---- ---------------------
------ ------- -
----------- -
-----------------
--
------ -
------ -
------ ---
----- --
------ --
-
--
-------- -
-------------- -
-- ----- --- ----------- -
--------- - -
---------- - --
-
-- ----- --- ----------- -
-- ---------- -- ---------- - -- - -- -
---------------------------------------------
----------------------------------------------
------
-
-
------------- -- -
--- ---- - - -- - - --- ---- -
--------------------- - ---------- - -- - - - ---
-
-----------
---------------------------------------------
-- -----
-
-
-
---------以上代码实现了一个简单的下拉刷新和上拉加载更多的逻辑，当加载完所有数据时自动禁用加载更多功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005599a81e8991b448d72f5