vue 解决mintui弹窗弹起来,底部页面滚动bug问题


Posted in Javascript onNovember 12, 2020

经过dom层层注释缩小反馈终于找到问题所在。

问题经过

我在弹起弹窗的时候,设置了popupVisible为true

然后触发了vue的updated生命周期钩子函数

然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘

然后就导致了底部页面向上滚动

解决办法

去掉updated函数里面的重绘方法

补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结

说实话,使用Mint-ui这个ui组件的过程中遇到了很多问题,这个ui组件问题真多。

先说今天的主题吧,我在使用popup选择框的时候和datepicker时间选择器的时候出现了滚动穿透的问题,特别是在ios上面。

找了好多方法,最后同事给出了一个好的方法,很简洁,于是就想着总结下来。

防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了,native是关键,这个表示根元素的意思,也就是body或者html

代码如下:

Popup组件:

<mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
  </mt-popup>
  // 防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了native是关键,这个表示根元素的意思,也就是body或者html
  <mt-popup
   v-model="popupVisible"
   position="bottom"
   @touchmove.native.stop.prevent>
   ...
  </mt-popup>

注意当mt-popup中还有div等子元素的时候,一定要注意,这个时候可能会有一些问题,会出现mt-popup这个元素也滚动不了的情况,所以说如果mt-popup本身不需要滚动的话,加了@touchmove.native.stop.prevent,底部页面就不会跟着滑动,如果mt-popup里面有滚动条需要滚动的话,可能就滚动不了,这个时候需要采取常规方法了,如下:

// 解决方式,通过监听popupVisible变量,在弹窗出现后禁止body节点touchMove事件,弹窗消失后恢复body节点的touchMove事件

//html 如下
   <mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
   </mt-popup>
  // js 如下
  const handler = function(e) {
    e.preventDefault();
  }
  
  // vue实例内
  watch: {
    popupVisible: function (val) {
     if(val) {
       document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
     } else {
       document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });
     }
    }
  }

Datetime Picker:

<mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @touchmove.native.stop.prevent>
 </mt-datetime-picker>

对于时间组件加了@touchmove.native.stop.prevent,选择时间滚动的时候底部页面就不会跟着滚动了,很完美。

@touchmove.native.stop.prevent可以使我们省好多事,用起来吧!

以上这篇vue 解决mintui弹窗弹起来,底部页面滚动bug问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
tbody元素支持嵌套的注意方法
Mar 24 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
jquery插件制作教程 txtHover
Aug 17 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
如何在js代码中消灭for循环实例详解
Jul 29 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
vue-router 控制路由权限的实现
Sep 24 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 #Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 #Javascript
在vue中使用image-webpack-loader实例
Nov 12 #Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
JavaScript ES 模块的使用
Nov 12 #Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 #Javascript
vue 解决provide和inject响应的问题
Nov 12 #Javascript
You might like
PHP 引用文件技巧
2010/03/02 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
PHP fclose函数用法总结
2019/02/15 PHP
一个tab标签切换效果代码
2009/03/27 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
Python的内存泄漏及gc模块的使用分析
2014/07/16 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
python同时替换多个字符串方法示例
2019/09/17 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
Python类super()及私有属性原理解析
2020/06/15 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
python操作toml文件的示例代码
2020/11/27 Python
canvas 基础之图像处理的使用
2020/04/10 HTML / CSS
超市国庆节促销方案
2014/02/20 职场文书
房屋租赁协议书
2014/04/10 职场文书
工作作风承诺书
2014/08/30 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
陕西导游词
2015/02/04 职场文书
培训讲师开场白
2015/06/01 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android