vue-cli引用mui的JS文件遇到的问题

2024年3月12日 256次阅读 来源: 默默

因项目的需要，采用了MUI的滚动事件（scroll），遇到了不少的问题，做个记录，方便以后查询。

问题一：引入MUI顶部滑动样式后，顶部滑动条全屏显示

<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>

解决方案：查看官方文档，文档说明：区域滚动组件默认为absolute定位，全屏显示。所以你需要手动删掉全屏这个类，即 mui-fullscreen

问题二：没有滚动效果

解决方案：根据官方文档：若使用区域滚动组件，需手动初始化scroll控件，因此，在需要用到该滚动效果的组件中，引入mui.js文件，并初始化

import mui from '../../lib/mui/js/mui.js'; // 建了lib文件夹，存放mui相关文件
mui('.mui-scroll-wrapper').scroll({
deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

问题三：初始化之后报错

控制台错误消息为：

caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them。

原因：webpack启用了严格模式，而MUI没有，所以两者冲突了。
解决方案：在.babelrc文件中加上：

"ignore": [
"./src/lib/mui/js/*.js"  // 建了lib文件夹，存放mui相关文件
]

另一种解决方法：该方法试过，出现另一种报错：export ‘default’ (imported as ‘mui’) was not found in ‘../../lib/mui/js/mui.js’。不知道是不是因人而异呢==，有朋友成功了而我的不行2333

1. 安装babel-plugin-transform-remove-strict-mode
cnpm i babel-plugin-transform-remove-strict-mode -D
2. 在.babelrc文件的plugins节点中配置：
"transform-remove-strict-mode"

问题四：终于可以滑动了，点击滑动报错：

控制台错误消息为：

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

解决方法：

* {
touch-action: pan-y;
}

2016年Google I/O上提出的概念，目的是用来提升页面滑动的流畅度。

问题五：顶部可以滑动之后，底部Tab不能切换

控制台错误消息为：

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的所有样式，复制一份，重新赋予新的样式类名，如mui-tab-item-my

问题六：刚进入页面无法滑动，要刷新之后方可滑动

原因：滑动时机不对，如前面代码显示的那样，在导入mui后就初始化滑动控件，此时，当重新进入页面时，组件的DOM结构还未渲染好，就初始化，自然不会有效果。
解决方法：放到mounted钩子函数中，在这个生命周期函数中，DOM结构已被渲染好，可以初始化滑动控件

mounted(){
  // 初始化滑动控件
  mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  });
}
    原文作者：默默
    原文地址: https://segmentfault.com/a/1190000017558699
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞