前言
在前端开发过程中，我们经常会用到滚动视图。而 iScroll 是一个轻量级的且功能强大的滚动插件，被广泛应用在 HTML5 移动 Web 开发中。在 React 中，我们可以使用 matt-schrader-react-iscroll 这个 npm 包来实现 iScroll 的封装。本文将详细介绍如何使用该 npm 包。
安装
在使用 matt-schrader-react-iscroll 前，我们需要先在项目中安装该包。运行以下命令即可完成安装：
--- ------- --------------------------- ------
使用
完成安装后，我们可以在组件中引入 matt-schrader-react-iscroll 包：
------ ------- ---- ------------------------------
然后，我们就可以在组件的 render() 方法中使用这个包了：
-------- -
------ -
-------- ------------------
----
----------
----------
----------
----------
----------
-----
----------
--
-以上代码中的 options 是一个对象，它可以包含一些属性，这些属性代表了 iScroll 的配置选项，比如：
----- ------- - - ----------- ----- ----------- ----- --------------- ----- ----------------- ------- ---------------------- ----- ------------ ----- --------- ----- ----- ------ --
如果需要完整的配置选项，可以查阅 iScroll 的官网。当然，我们也可以像使用传统的 iScroll 一样，直接在 HTML 中使用 iScroll 的 API。
-------- -
------ -
---- --------------------
---- ---------------------
----
----------
----------
----------
----------
----------
-----
------
------
--
-然后在 componentDidMount() 中初始化 iScroll：
------------------- -
--- -------------------------- -
----------- -----
----------- -----
--------------- -----
----------------- -------
---------------------- -----
------------ -----
--------- -----
----- ------
---
-这样，我们就完成了对 iScroll 的初始化。
深度分析
使用 matt-schrader-react-iscroll 包是有一些注意点的。首先需要注意的是，在 React 中，渲染出来的组件可能是动态生成的，因此在使用 iScroll 时，需要在组件进入界面后（componentDidMount）才能正常地初始化 iScroll。因为只有在组件渲染完成后，iScroll 才能获取到正确的 DOM 节点。
另外，由于使用了该包，可能会让 React 对容器的大小进行样式计算时出现问题，需要在样式中给容器加上高度和宽度，避免出现大小计算错误的情况。
最后，需要注意的是，在使用 iScroll 的 API 时，需要传入相应的 DOM 节点作为参数，一定要确保传入正确的 DOM 节点，否则可能会出现严重的 BUG 和崩溃。
示例代码
以下是一个简单的示例代码：
------ ------ - --------- - ---- --------
------ ------- ---- ------------------------------
----- ----------- ------- --------- -
-------- -
----- ------- - -
----------- -----
----------- -----
--------------- -----
----------------- -------
---------------------- -----
------------ -----
--------- -----
----- ------
--
------ -
-------- ------------------
----
----------
----------
----------
----------
----------
-----
----------
--
-
-
------ ------- ------------参考文章：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005547f81e8991b448d1c38