引入mui.js报错 删除严格模式 mui滑动组件无效 scroll组件报错

2019年12月14日 亲测有效

一: 引入js文件报错

报错信息

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions

报错原因:
webpack打包时使用的严格模式打包,而mui.js内部使用了'caller', 'callee', and 'arguments',两者冲突.
解决方案(删除严格模式)
1.安装包

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

2.在配置babel-loader中配置

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

如果有很多个plugins要写在最后,例如:(此代码中其他配置不要求 仅供全面参考)

                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        "plugins": [
                            "@babel/plugin-transform-runtime",
                            ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
                        ]
                    }
                }

到此完美解决

二 使用mui的scroll组件,各种填坑,解决报错

效果是区域滚动 ,鼠标按下不松 区域向左或向右滑动

<template>
    <div>
        <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>
    </div>
</template>

<script>
	//1.引入js文件,路径根据个人需求修改
    import mui from '../lib/mui/js/mui.js';
    //2.初始化滑动控件
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0005
    });
</script>

坑一: 展示效果混乱

报错原因:设置了类 全屏展示
解决方案:删除类mui-fullscreen
坑二: 第一次打开页面 无效果 刷新就有效果了
原因: 初始化控件的时机不对

• 初始化滑动控件,是将类选择器.mui-scroll-wrapper交给mui,mui根据选择器获取到dom元素,再进行scroll()初始化,然而我们之前的写法是在组件还没挂载到页面就初始化了,没挂载到页面是获取不到dom元素的,所以不起这时候操作没有意义.

解决方案:

• 将初始化控件代码放到mounted函数中,表示组件放到页面上后才能初始化滑动条
• mounted函数:当组件中的dom结构渲染好且已经挂载到页面上后,会执行这个生命周期函数
• 要操作元素最早也要在mounted中操作,这时候的元素是最新的,也是第一时间能获取到的.

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

坑三: 若有用底部tabbar选项卡,会发现当滑动条能滑动时,底部选项卡无法点击跳转 报错

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See

原因:
选项卡的类mui-tab-item和引入的js冲突
解决方案:
将此类和类下面包含的元素,所有和此类牵扯的样式自己通过检查复制其样式,然后重新定义新的类名,解决冲突.

坑四: 滑动时报错,对效果不影响可不管,如果看着烦就在style中加样式

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See

加此样式

<style scoped>
    *{
        touch-action: pan-y;
    }
</style>

原因:是谷歌浏览器为了提高页面滑动流畅度而折腾出来的东西,如果换成其他浏览器可能不会出现此警告.
CSS 属性 touch-action介绍:

• 用于指定某个给定的区域是否允许用户操作，以及如何响应用户操作（比如浏览器自带的划动、缩放等）。
• pan-y表示启用单指垂直平移手势,即如果纵向滑动在谷歌浏览器中可以提高滑动流畅度,如果pan-x表明横向提高滑动流畅度,两个值都可以随便用,只要不出警告就行.

坑五: 能左右滑动时 自身选项点击无法跳转,例"热点","北京"点击无效
解决方案:不通过router-link跳转,通过vue router官方提供的编程式导航跳转
如果不懂编程式导航的可见我博文https://blog.csdn.net/weixin_45842655/article/details/103554428

坑六: 电脑上通过谷歌浏览器调试都能正常使用了,但是在手机上调试时发现自身选项点击无法跳转
解决方案:mui官方提供了一个tap事件 和click类似 可以解决此问题(仅mui的组件能用),把@click改成@tap即可