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 相关文章推荐
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jquery remove方法应用详解
Nov 22 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
Jun 15 Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
vue切换菜单取消未完成接口请求的案例
Nov 13 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制作新闻系统的思路
2006/10/09 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
python 字典(dict)按键和值排序
2016/06/28 Python
Python中正则表达式详解
2017/05/17 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
详解python安装matplotlib库三种失败情况
2020/07/28 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
linux下进程间通信的方式
2014/12/23 面试题
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
《孔子游春》教学反思
2014/02/25 职场文书
爱我中华教学反思
2014/04/28 职场文书
工厂见习报告范文
2014/10/31 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
老人与海读书笔记
2015/06/26 职场文书
八年级作文之感恩
2019/11/22 职场文书
php引用传递
2021/04/01 PHP
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android