vue中使用mui中的滑动组件时报错TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed

Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them
出现这个报错是因为mui中的tab-top-webview-main 滑动组件中的js，使用了非严格模式的语法，然而在webpack打包中默认使用了严格模式去打包
解决方法：
1.一号坑：取消掉webpack默认的严格模式打包：
下载：
npm install babel-plugin-transform-remove-strict-mode --save-dev

在bablerc文件中 添加：“plugins”:

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

 

2.使用mui中的横向滑动组件: tab-top-webview-main

注意：二号坑 取消掉第一个div#slider 的fullscreen样式，否则会以全屏展示

<div id="slider" class="mui-slider">
				<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>
   </div>

 

3.三号坑 在mounted钩子函数中初始化，因为这个组件需要获取DOM元素，而mounted是在页面挂载完成后执行的生命周期函数，所以在此时执行初始化的时机是比较合适的
（如果在mounted之前的生命周期函数中初始化，会出现一个问题：进入这个滑动组件的页面时，第一次无法滚动，刷新之后又可以正常滚动了）
 

<script type="text/javascript">
	import mui from '../lib/mui/dist/js/mui.min.js';
	export default {
		mounted() {
			mui('.mui-scroll-wrapper').scroll({
			deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
		}
	}
</script>

4.四号坑 到此为止虽然可以使用了，但是还有一个问题，在谷歌浏览器中会报警告，因为谷歌自己弄了一个什么东西我也不太清楚，反正冲突了(也不是很严重，不解决也不会怎么样，如果强迫症的话还是解决掉吧)，解决方案是给全局加上一个样式：

* {
		touch-action: pan-y;
	}

原因：（是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西） http://www.cnblogs.com/pearl07/p/6589114.html https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

原文链接：https://blog.csdn.net/weixin_42536639/article/details/86821209

 

移除严格模式

babel-plugin-transform-remove-strict-mode   https://github.com/genify/babel-plugin-transform-remove-strict-mode

来源：CSDN

作者：快乐de馒头

链接：https://blog.csdn.net/chunxiaqiudong5/article/details/103671294