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 相关文章推荐
JQuery动画和停止动画实例代码
Mar 01 Javascript
jQuery+CSS3实现3D立方体旋转效果
Nov 10 Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
Sep 20 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
vue实现PC端录音功能的实例代码
Jun 05 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调用MySQL的存储过程的实现代码
2008/08/12 PHP
php长字符串定义方法
2012/07/12 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
JavaScript的parseInt 进制问题
2009/05/07 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
document.documentElement的一些使用技巧
2013/04/18 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
javascript 数组操作详解
2015/01/29 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Vue实现的父组件向子组件传值功能示例
2019/01/19 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
python绘制双柱形图代码实例
2017/12/14 Python
详解Django admin高级用法
2019/11/06 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
char型变量中能不能存贮一个中文汉字
2015/07/08 面试题
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
多媒体教室标语
2014/06/26 职场文书
写给女朋友的保证书
2015/05/09 职场文书
婚礼领导致辞大全
2015/07/28 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
深度学习详解之初试机器学习
2021/04/14 Python
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL