解决：vue 弹窗滑动 底部页面跟着滑动

Posted 2023-04-23

参考技术A 但是这种方法会导致弹窗无法滚动

若想弹窗滚动，

1.这里使用了vant的弹窗组件，能解决弹窗滚动问题 但是在ios手机上 斜着滑蒙罩层 还是会导致低层页面滚动

2.这里想到一个稍微巧妙点的想法： 因为弹窗需要滚动 干脆就把弹窗的最大高度设置为90% 这样用户基本不会点到蒙罩层

1.2.结合处理是我目前对弹窗滚动 底层页面跟着滚动的处理方法

以上是小白的傻子试解决方法。
真正解决方法来咯~~~~看好咯
在vue项目中注册两个全局方法
方法1---在main.js中写入两个方法 一个是可以滚动方法 一个是禁止滚动方法

在弹窗需要弹出展示前先调用禁止滚动的方法、

在关闭弹窗之前调用滚动方法

小程序弹窗阻止滑动的两种方法

弹出 fixed 弹窗后，在弹窗上滑动会导致下层的页面一起跟着滚动。

场景1：弹窗内无滚动内容

可以在弹窗最外层元素绑定touchmove事件，触发事件返回false即（在vue类框架中也可以加.stop阻止冒泡）。

简单写法：catchtouchmove=‘true‘

此种方式会阻止弹窗内内容的滚动。

场景二：弹窗内有滚动内容

在弹窗外层根元素动态添加一个no-scroll样式，定义no-scroll为{height: 100%; overflow: hidden;}

当需要阻止滑动的弹窗显示时添加no-scroll，弹窗关闭去掉no-scroll即可。

此种方式的缺点是当弹窗显示增加no-scrll后弹窗下面的页面会回到顶部。