MUI scroll顶部滑动条问题

在使用webpack打包时，使用Vue和MUI 中的 scroll 和 Tabbar 的时候会出现一些坑！！！

6坑以及解决6坑的方法：

1. 制作滑动条，不想自己写，想找模板，就用 MUI 中的 tab-top-webview-main.html

2. 当 html 样式引过来的时候，有一个类必须去掉，要不然他会覆盖整个屏幕，所以需要把 slider区域 的 mui-fullscreen 删除掉。

3. 上边都做完，发现滑动条还是无法滑动，然后可以去官方文档，发现这是JS组件，需要被初始化
   官方文档

   1. 导入 mui.min.js
   2. 调用官方提供的方式去初始化：

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

4. 以上都做完之后，发现控制台报错：“Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode…”
   

   1. 注释导入 mui.js 就没有报错，所以推测，可能是mui.js用到了'caller', 'callee', and 'arguments' 这些东西，但是，webpack 打包好的 xxx.js 文件中，默认启用了严格模式，所以这两者冲突了；
   2. 解决方案：
      1. 把 mui.js 中的 非严格 模式的代码 改掉，但是不现实，毕竟 代码是人家写的！！！！
      2. 把 webpack 打包时候的严格模式禁用掉；
   3. 选择第二种方法：移除严格模式，需要安装使用一个插件
      cnpm i babel-plugin-transform-remove-strict-mode -D
      然后，在.babelrc 这个文件中配置

   		{
    			"plugins": ["transform-remove-strict-mode"]
      		}
   

5. 以上都做完了，刷新一下页面，终于能滑动了，但是控制台又报错了：Unable to preventDefault inside passive event listener due to target being treated as passive.
   解决方案：
   关于 touch-action 的CSS属性，可以进官网看看！

    //在你的样式中添加 
    
    * {
    	touch-action:pan-x;
    }
   

6. 这个时候，也可以滑动了，也不报错了，就很开心；唉，还是年轻哈哈；当你重新打开的时候，又不能滑动了，白高兴！！！！！

   1. 分析：当进入页面的时候，滑动条不能正常工作，经分析发现，如果要初始化 滑动条，必须等 DOM 元素加载完，所以，要把 初始化 滑动条 的代码 ，搬到 mounted 生命周期的钩子函数中；

    mounted() {
    	// 当组件中的 DOM 结构被渲染好，并放到页面中后，会执行这个钩子函数
   	//如果要操作元素，最早要在 mounted 中，因为这时候 DOM 元素是最新的
   
   	// 2.初始化滑动控件(放的位置会重要，不能直接放到导入mui.js后面)
   	mui(".mui-scroll-wrapper").scroll({
     	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
   });
   

}
```

注：到这里就做完了！！！！

---

---

赠送：
如果你引用了 MUI 的 tabbar 之类的样式了，那么你以上做完，发现切换组件不成功！！！！
因为这里的样式类名和滑动条JS中的代码重名了！！！
解决：

首先打开你引用 tabbar 的部分，有一个类名叫 mui-tab-item ，先从控制台把关于它的所有的样式拷贝到你的样式中，然后重新起一个类名替换它；例如：mui-tab-item-s