使用mui的顶部滚动出现的问题

使用mui的顶部滚动出现的问题

1. 在图片分享组件中引入js文件初始化

import mui from "../../../lib/mui/js/mui.js"

2. 引入该插件的配置

export default {
  //如果要引入第三方插件最好在mounted中引入
  mounted() { //生命周期mounted
    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

原因

​ webpack打包的js文件是严格模式，对于mui的引入的js代码无法接受

解决方法

​ 移除严格模式(仅适用于webpack4+版本)

​ 1. 安装

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

​ 2. 在.babelrc中的plugins中配置一下

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

总结

MUI-UI插件顶部滚动功能配置为什么要挂载到mounted里？

因为去除严格模式后，顶部只有在刷新的时候才能拖动，如果从其他页面进入到此滚动页面则不能拖动，此时需要让他自己加载，mounted之时页面已经真正渲染好了，故在mounted中配置mui滚动组件的配置。