前言

这两天试了下React和iScroll结合的事情，坑还是挺多的。注意这里说的是原版的iScroll5而非魔改版的react-iscroll。网上查了下关于这个的讨论不多，但有两个人做成功的案例。不料实操的时候问题还是多多，例如关于AMD报错的问题无人提及，外网上查了一圈也没什么人讨论这个。

AMD报错

首先第一步导入iScroll就会出现问题:
import iScroll from ‘./lib/iscroll’;

导入后React会报错，提示iScroll.js里面最后两行有个define is not defined。这是关于异步amd的错误，研究一阵后发觉这个并不是我想要的东西，随即仔细看了下这一段的语法，且抱着试试的心态将iScroll中最后一段（2162行-2168行）修改为如下：

if ( typeof module != 'undefined' && module.exports ) {
    module.exports = IScroll;
} else {
    window.IScroll = IScroll;
}

于是amd报错的问题就这么解决了。

 

如何在React插入iScroll

总体思路是在React加载后再载入iScroll
因此在需要滚动的React组件中创建componentDidMount()具体如下

    componentDidMount() {
        //加载iScroll插件
        const options = {
            preventDefault: false,// 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            zoom: false,// 禁止缩放
            mouseWheel: true,// 支持鼠标滚轮
            probeType: 3,// 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            bounce: true, // 拖拽超过上下界后出现弹射动画效果
            scrollbars: false,// 展示滚动条
        };
        setTimeout(function () {//由于手机性能的原因，我们在定时器里面进行实例化
          this.myScroll = new iScroll("#projectSection",options);  
        },10);
        setTimeout(function() {
            this.myScroll.refresh();
        },100);
    }