在vue中加入MUI的scroll横向滚动

开始

首先从MUI 找到相应的文件

在google浏览器打开的效果如图

但是这样copy之后，会发现根本不能滑动，而且还未报错;此时，需要我们引入mui.js文件
import '该文件地址' 这是es6导入语法，在vue项目中的要使用该组件的文件下的<script>中使用即可。

但是，在浏览器测试时会发现，caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them。报错了。这个错误是说webpack默认是严格模式，而mui.js中的一些属性不符合严格模式。
参考解决方案，这篇文章的作者很清楚的介绍了如何解决问题.这里我就不再叙述了，而且本人亲测可行。
效果如图：

但是不要以为这就完了，这是每次滑动会出现警告.这是只需要在样式中加入

*{
  touch-action:pan-y;
}

这样就可以消除警告了。2016年Google I/O上提出的概念，目的是用来提升页面滑动的流畅度。

你以为这就完了，那你就大错特错了；此时，尝试点底部同样用MUI写的tab组件，会发现出现警告且功能失效，因为Tab样式（也是MUI的）与MUI的JS文件冲突；想要解决这个问题，没办法，只有重新定义一个class名称，并将mui-tab-item相关样式copy一份。

.mui-bar-tab .mui-tab-item-my .mui-icon {
  top: 3px;
  width: 24px;
  height: 24px;
  padding-top: 0;
  padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item-my {
  display: table-cell;
  overflow: hidden;
  width: 1%;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #929292;
}

.mui-bar-tab .mui-tab-item-my .mui-icon ~ .mui-tab-label
{
  font-size: 11px;

  display: block;
  overflow: hidden;

  text-overflow: ellipsis;
}
.mui-bar-tab .mui-tab-item-my .mui-icon:active
{
  background: none;
}
.mui-bar-tab .mui-tab-item-my.mui-active
{
  color: #007aff;
}

这样底部功能就恢复了。