在前端开发中，滚动相关的功能经常被用到。react-better-scroll 是一个基于 better-scroll 封装的 React 组件库，提供了更佳的滚动功能。本文将详细介绍 npm 包 react-better-scroll 的使用方法。
安装
使用 npm 安装 react-better-scroll：
npm install react-better-scroll --save
使用
使用 react-better-scroll 需要先将要滚动的内容包裹在组件中，然后将该组件作为 react-better-scroll 的子组件传入进去。
-- -------------------- ---- -------
------ ----- ---- -------
------ ------- ---- ---------------
------ - ----- - ---- ---------------------
----- --- ------- --------------- -
------------------- -
-----------------------
-
------------------ -
----------------- - -
-------- -----
------ -----
-
----------------- - --- -------------------------- ------------------
-
-------- -
------ -
---- ----------------
--------
---- --------------
----
----------
----------
----------
----------
----------
-----
------
---------
------
-
-
-
------ ------- ---上面的代码通过将列表内容放在 Scroll 组件中，再通过 ref 获取 Scroll 组件的子组件 <div>, 再通过 new BScroll 生成 better-scroll 对象。
参数
react-better-scroll 提供了以下配置参数：
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| direction | 滚动方向，可填写 vertical 或 horizontal |
String | vertical |
| click | 是否可点击 | Boolean | true |
| pullDownRefresh | 是否开启下拉刷新 | Object | null |
| pullUpLoad | 是否开启上拉加载 | Object | null |
| scrollbar | 是否显示滚动条 | Boolean 或 Object | false |
| bounce | 是否启用弹性动画效果 | Boolean | true |
| momentum | 是否开启惯性滑动 | Boolean | true |
事件
react-better-scroll 提供了以下事件：
| 事件 | 说明 |
|---|---|
| beforeScrollStart | 滚动开始前触发 |
| pullingDown | 下拉刷新前触发 |
| pullingUp | 上拉加载前触发 |
| scroll | 每当滚动时触发 |
| scrollEnd | 滚动结束时触发 |
| touchEnd | 滚动结束且有惯性滑动时触发 |
| beforeRender | 渲染 DOM 前触发 |
| destroy | 销毁 better-scroll 时触发 |
总结
react-better-scroll 封装了 better-scroll，提供了更方便的在 React 中使用滚动功能的方法。本文详细介绍了 react-better-scroll 的使用方法，包括安装，使用，参数和事件等。需要注意的是，react-better-scroll 只是 better-scroll 的组件封装，如果要更深入地使用 better-scroll 的功能，可以查看 better-scroll 的官方文档。
示例代码：https://codesandbox.io/s/react-better-scroll-demo-jiym2。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bca81e8991b448d967a