vue引用mui的JS文件遇到的问题

因项目的需要，采用了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
});

问题三：初始化之后报错

控制台错误消息为：

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

解决方案：

1. 使用cnpm 安装 @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode

cnpm i @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode -D

2. 在.babelrc文件中增加["@babel/plugin-transform-modules-commonjs", { “strictMode”: false }]

"plugins": [
      ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
    ]

问题四：刚进入页面无法滑动，要刷新之后方可滑动

主要原因：滑动时机不对，如前面代码显示的那样，在导入mui后就初始化滑动控件，此时，当重新进入页面时，组件的DOM结构还未渲染好，就初始化，自然不会有效果。

解决方法：放到mounted钩子函数中，在这个生命周期函数中，DOM结构已被渲染好，可以初始化滑动控件
解决方案：

mounted(){
  // 初始化滑动控件
  mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  });
}

问题五：终于可以滑动了，点击滑动报错：

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

解决方法：加入css样式

.mui-slider {
	touch-action: pan-x;
}

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的所有样式，复制一份，重新赋予新的样式类名，如my-tab-item