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 相关文章推荐
IE与firefox之jquery用法区别
Oct 03 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
复选框全选与全不选操作实现思路
Aug 18 Javascript
封装的jquery翻页滚动(示例代码)
Nov 18 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
node.js +mongdb实现登录功能
Jun 18 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 flush类输出缓冲剖析
2008/10/19 PHP
php 保留小数点
2009/04/21 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
[01:07:20]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第二场 2月2日
2021/03/11 DOTA
Python运算符重载用法实例
2015/05/28 Python
python绘制直线的方法
2018/06/30 Python
python中dict()的高级用法实现
2019/11/13 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
pytorch 状态字典:state_dict使用详解
2020/01/17 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python如何读取、写入CSV数据
2020/07/28 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
python遍历路径破解表单的示例
2020/11/21 Python
大学四年的个人自我评价
2014/01/14 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书