mui之 scroll采坑 痛定思痛。 2021-08-13 20:47 306阅读 0赞 scroll:区域滚动 采坑一: 单纯的复制样式和结构 <div id="slider" class="mui-slider"> <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> 当你滑动的时候,是滑动不了的 ![在这里插入图片描述][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
还没有评论,来说两句吧...