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

Posted 苍青浪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序弹窗阻止滑动的两种方法相关的知识,希望对你有一定的参考价值。

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

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

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

简单写法:catchtouchmove=‘true‘

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

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

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

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

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

 

以上是关于小程序弹窗阻止滑动的两种方法的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序-自制弹出框禁止页面上下滑动

LayUI使用弹窗重载父级数据表格的两种方法

小程序获取用户信息的两种方法

js阻止事件冒泡的两种方法

js阻止表单提交的两种方法

微信小程序--跳转页面常用的两种方法