vue中使用mui中的滑动组件时报错TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
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
在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;
}
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)