简介
react-infinite-scroller-with-scroll-element 是一个使用 React 实现的无限滚动组件，其特点是支持自定义滚动容器，同时支持纵向和横向滚动，适用于在列表或表格中实现无限滚动加载数据的场景。
安装
在项目根目录下通过 npm 或 yarn 安装 react-infinite-scroller-with-scroll-element。
npm install react-infinite-scroller-with-scroll-element --save # 或 yarn add react-infinite-scroller-with-scroll-element
使用方法
引入 react-infinite-scroller-with-scroll-element 模块，并在组件中使用它即可。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------- ---- ----------------------------------------------
-------- ----- -
----- ------- --------- - -------------
----- -------- - -- -- -
-- ---------
--
------ -
---------------
-------------------
--------------
---------------------------------------------------------
----------------
-
----------------- -- -
-- --------
---
-----------------
--
-其中，loadMore 函数用于加载更多数据，hasMore 表示是否还有更多数据，scrollElement 用于指定滚动容器的元素，className 用于指定列表的样式名称。
属性
- loadMore 函数，用于加载更多数据。
- hasMore 布尔值，表示是否还有更多数据。
- scrollElement DOM 元素，指定滚动容器的元素。
- className 字符串，指定列表的样式名称。
- initialLoad 布尔值，表示是否在组件挂载后立即加载数据，默认为 true。
- threshold 数字，表示到达底部多少像素时触发加载更多数据的事件，默认为 250 像素。
- useWindow 布尔值，表示是否使用浏览器窗口作为滚动容器，默认为 true。
- isReverse 布尔值，表示是否反向滚动，默认为 false。
- loader React 组件，用于渲染加载提示。
- endMessage 字符串或 React 组件，用于渲染到达数据末尾的提示。
更多属性详见官方文档：https://www.npmjs.com/package/react-infinite-scroller
实例代码
横向滚动列表
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------- ---- ----------------------------------------------
------ ------------
-------- ----- -
----- ------- --------- - -------------
----- -------- - -- -- -
-- --------
------------- -- -
----- ---- - ------------ ------- -- -- --- -- -- --
--- - - ------------ - --
----
-----------------------------
-- ------
--
------ -
---- ------------------- ---------------------------
---------------
-------------------
--------------
---------------------------------------------------------
----------------
----------------
-----------------
-
----------------- -- -
---- --------------------- --------------
---------
------
---
-----------------
------
--
-
------ ------- ------ -------------------- ---- ------- --------------- - ----------- ----- - ----- - -------- ----- ---------- ------- ----------- ------- - ---------- - ------ ------ ------- ------ ------- --- ----- ----- ------------- ----- ----------- ----------- -------- ----- ---------------- ------- ------------ ------- ---------- ----- ------------ ----- -
纵向滚动表格
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------- ---- ----------------------------------------------
------ ------------
-------- ----- -
----- ------- --------- - -------------
----- -------- - -- -- -
-- --------
------------- -- -
----- ---- - ------------ ------- -- -- --- -- -- --
--- - - ------------ - --
----- ----- --- - ------------ - ----
---- ------------------------ - -- - ----
----
-----------------------------
-- ------
--
------ -
---- ------------------- ---------------------------
------ -----------------
-------
----
-----------
-------------
------------
-----
--------
-------
---------------
-------------------
--------------
---------------------------------------------------------
---------------------
-
----------------- -- -
--- --------------
------------------
--------------------
-------------------
-----
---
-----------------
--------
--------
------
--
-
------ ------- ------ -------------------- ---- ------- --------------- - ----------- ----- - ----- - ---------------- --------- ----------- ------- ------ ----- -------------- ----- - ----- --- ----- -- - ------- --- ----- ----- -------- ----- - ----- -- - ------------ ----- - ---------- - -------- ---------------- -
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731381e8991b448e93e6