vue 组件中 引入 mui 横向滑动 HTML结构 出现的问题以及解决方法

版权声明：本文为CSDN博主「mango93」的文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_43633937/java/article/details/90676485

我们在vue 组件中 引入 mui 横向滑动 HTML结构：

如图：

代码如下：

<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>
    　　　<a class="mui-control-item" href="#item6mobile" data-wid="tab-top-subpage-6.html">
            科技
         </a>
       </div>
    </div>
</div>

 

 

问题1：顶部滑动条全屏显示

原因：区域滚动组件默认为absolute定位，全屏显示。

解决方案：所以你需要手动删掉全屏这个类，即 mui-fullscreen

问题二：没有滚动效果

原因：若使用区域滚动组件，需手动初始化scroll控件

解决方案：在需要用到该滚动效果的组件中，引入mui.js文件，并初始化

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

问题三：初始化完成后依旧会报错：

Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Function.Class.extend (mui.js?80c5:3424)
    at eval (mui.js?80c5:3642)
    at eval (mui.js?80c5:4550)
    at Object../src/lib/mui/js/mui.js (app.js:2933)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)
    at eval (selector.js?type=script&index=0!./src/components/photos/PhotoList.vue:1)
    at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/photos/PhotoList.vue (app.js:781)
    at __webpack_require__ (app.js:679)
    at fn (app.js:89)

原因：因为mui中的tab-top-webview-main 滑动组件中的js，使用了非严格模式的语法，然而在webpack打包中默认使用了严格模式去打包

解决方案：

1.安装包

npm install --save-dev babel-plugin-syntax-dynamic-import

2.在.babelrc文件根目录处添加

"ignore": [ "./src/lib/mui/js/*.js" ]

问题四：解决完以上问题后就可以滑动了，点击滑动后发现，又开始报错

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

解决方案：在需要用到该滚动效果的组件中加入样式：

* {
        touch-action: pan-y;
    }

问题五：点击滑动问题解决后，底部tab栏又出现不能切换的情况，并且有报错信息

[Intervention] Unable to preventDefault inside passive 
event listener due to target being treated as passive. See 
https://www.chromestatus.com/features/5093566007214080

原因：Tab栏样式也是mui的，与MUI的JS文件冲突

解决方案：将Tab栏mui-tab-item的所有样式复制下来，重新赋予其新的样式类名

 

问题六： 刚进入页面时滑动条无法滑动，要刷新之后才能滑动

原因：滑动化的时机不对

解决方案：应该将初始化放入mounted中，这时候DOM元素是最新的

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