vue项目中进民退”弹窗弹起来底部页面滚动怎么解决 - 行业资讯

　　介绍

这期内容当中小编将会给大家带来有关vue项目中进民退”弹窗弹起来底部页面滚动怎么解决,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

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

<强>问题经过

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

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

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

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

<强>解决办法

去掉更新函数里面的重绘方法

<强>项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结

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

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

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

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

代码如下:

<强>弹出组件:

& lt; mt-popup 　　v模型=皃opupVisible" 　　位置=癰ottom"比; 　　… 　　& lt;/mt-popup>//防止滚动穿透只需加入@touchmove.native.stop。防止阻止默认根元素的默认事件就可以了本机是关键,这个表示根元素的意思,也就是身体或者html 　　& lt; mt-popup 　　v模型=皃opupVisible" 　　位置=癰ottom" 　　@touchmove.native.stop.prevent> 　　… 　　& lt;/mt-popup>

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

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

//html如下
　　& lt; mt-popup
　　v模型=皃opupVisible"
　　位置=癰ottom"比;
　　…
　　& lt;/mt-popup>//js如下
　　常量处理程序=function (e) {
　　e.preventDefault ();
　　}//vue实例内
　　看:{
　　popupVisible:函数(val) {
　　如果(val) {
　　document.getElementsByTagName(& # 39;身体# 39;)[0].addEventListener (& # 39; touchmove& # 39;,这一点。处理程序,{被动:假});
　　其他}{
　　document.getElementsByTagName(& # 39;身体# 39;)[0].removeEventListener (& # 39; touchmove& # 39;,这一点。处理程序,{被动:假});
　　}
　　}
　　}

<>强Datetime选择器:

 & lt; mt-datetime-picker
　　ref=皃icker"
　　类型=皌ime"
　　v模型=皃ickerValue"
　　@touchmove.native.stop.prevent>
　　& lt;/mt-datetime-picker>

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

上述就是小编为大家分享的vue项目中进民退”弹窗弹起来底部页面滚动怎么解决了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。