mui之 scroll采坑

痛定思痛。 2021-08-13 20:47 360阅读 0赞

scroll：区域滚动  
采坑一：  
单纯的复制样式和结构

当你滑动的时候，是滑动不了的  
![在这里插入图片描述][20191230161740749.png]  
其实想想也是，滑动不是js操作的行为吗？  
翻看文档，发现需要初始化scroll控件  
1 导入 mui.js  
`import mui from '../../lib/mui/js/mui.min.js'`

2 调用官方提供的 方式 去初始化：  
![在这里插入图片描述][20191230161855156.png]  
继续刷新页面  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]  
蒙了？ 先翻译一下是什么原因  
经过我们合理的推测，觉得，可能是 mui.js 中用到了 ‘caller’, ‘callee’, and ‘arguments’ 东西，但是， webpack 打包好的 bundle.js 中，默认是启用严格模式的，所以，这两者冲突了；  
解决方案： 1. 把 mui.js 中的 非严格 模式的代码改掉；但是不现实； 2. 把 webpack 打包时候的严格模式禁用掉；  
最终，我们选择了 plan B 移除严格模式： 使用这个插件 babel-plugin-transform-remove-strict-mode

npm i babel-plugin-transform-remove-strict-mode -D

在.babelrc进行配置  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20191230162823709.png]  
虽然可以滑动了，但是在其他tabbar有阻断  
原因：  
如果要初始化 滑动条，必须要等 DOM 元素加载完毕，所以，我们把 初始化 滑动条 的代码，搬到了 mounted 生命周期函数中；

mounted(){ 
        // 组件中dom结构被渲染好，并且已经放到页面，会执行这个钩子函数
            mui('.mui-scroll-wrapper').scroll({ 
    	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });

也说明，要操作元素，最好在mounted里面，应为此时的数据是最新的

还有一个小问题，就是滑动的时候，chrome浏览器会报黄  
添加这个 样式就ok

* { 
      // 用于指定某个区域是否允许用户操作，以及如何响应用户操作(比如浏览器自带的滑动，缩放)
      touch-action: pan-x;
    }

最终效果图  
![在这里插入图片描述][20191230163931220.gif]

[20191230161740749.png]: /images/20210813/74f2b098252548f2a1fc9f88c1d74941.png
[20191230161855156.png]: /images/20210813/d95f899fde20492686edb24231b0befc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70]: /images/20210813/cd6f5cb14fb74ad6be353865462f04b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70 1]: /images/20210813/31a4c79e56c149b28ff8e4f2f2e3ddab.png
[20191230162823709.png]: /images/20210813/de010b786ee54dab847e5a6baa2685e1.png
[20191230163931220.gif]: /images/20210813/03d679b25a41416bb8b6de35ee696a20.png