共计 2330 个字符，预计需要花费 6 分钟才能阅读完成。
因项目的需要，采用了 MUI 的滚动事件（scroll），遇到了不少的问题，做个记录，方便以后查询。
问题一：引入 MUI 顶部滑动样式后，顶部滑动条全屏显示
<div id=”slider” class=”mui-slider mui-fullscreen”>
<div id=”sliderSegmentedControl”
class=”mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted”>
<div class=”mui-scroll”>
<a class=”mui-control-item mui-active” href=”#item1mobile” data-wid=”tab-top-subpage-1.html”>
全部
</a>
<a class=”mui-control-item” href=”#item2mobile” data-wid=”tab-top-subpage-2.html”>
家居生活
</a>
<a class=”mui-control-item” href=”#item3mobile” data-wid=”tab-top-subpage-3.html”>
北京
</a>
<a class=”mui-control-item” href=”#item4mobile” data-wid=”tab-top-subpage-4.html”>
社会
</a>
<a class=”mui-control-item” href=”#item5mobile” data-wid=”tab-top-subpage-5.html”>
娱乐
</a>
</div>
</div>
</div>
解决方案：查看官方文档，文档说明：区域滚动组件默认为 absolute 定位，全屏显示。所以你需要手动删掉全屏这个类，即 mui-fullscreen
问题二：没有滚动效果
解决方案：根据官方文档：若使用区域滚动组件，需手动初始化 scroll 控件，因此，在需要用到该滚动效果的组件中，引入 mui.js 文件，并初始化
import mui from ‘../../lib/mui/js/mui.js’; // 建了 lib 文件夹，存放 mui 相关文件
mui(‘.mui-scroll-wrapper’).scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006
});
问题三：初始化之后报错
控制台错误消息为：
caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them。
原因：webpack 启用了严格模式，而 MUI 没有，所以两者冲突了。解决方案：在.babelrc 文件中加上：
“ignore”: [
“./src/lib/mui/js/*.js” // 建了 lib 文件夹，存放 mui 相关文件
]
另一种解决方法：该方法试过，出现另一种报错：export ‘default’ (imported as ‘mui’) was not found in ‘../../lib/mui/js/mui.js’。不知道是不是因人而异呢 ==，有朋友成功了而我的不行 2333
1. 安装 babel-plugin-transform-remove-strict-mode
cnpm i babel-plugin-transform-remove-strict-mode -D
2. 在.babelrc 文件的 plugins 节点中配置：
“transform-remove-strict-mode”
问题四：终于可以滑动了，点击滑动报错：
控制台错误消息为：
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
解决方法：
* {
touch-action: pan-y;
}
2016 年 Google I/ O 上提出的概念，目的是用来提升页面滑动的流畅度。
问题五：顶部可以滑动之后，底部 Tab 不能切换
控制台错误消息为：
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
原因：Tab 样式（也是 MUI 的）与 MUI 的 JS 文件冲突，具体什么冲突不清楚，有兴趣可以看源码，我还晕乎乎的 解决方法：找到 Tab 栏 mui-tab-item 的所有样式，复制一份，重新赋予新的样式类名，如 mui-tab-item-my
问题六：刚进入页面无法滑动，要刷新之后方可滑动
原因：滑动时机不对，如前面代码显示的那样，在导入 mui 后就初始化滑动控件，此时，当重新进入页面时，组件的 DOM 结构还未渲染好，就初始化，自然不会有效果。解决方法：放到 mounted 钩子函数中，在这个生命周期函数中，DOM 结构已被渲染好，可以初始化滑动控件
mounted(){
// 初始化滑动控件
mui(‘.mui-scroll-wrapper’).scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值 0.0006
});
}
