小程序弹出层禁止列表滑动_微信小程序解决自定义弹出层滑动时下层页面滚动问题...

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

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

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

简单写法：catchtouchmove='preventTouchMove'，在js文件中定义一个方法preventTouchMove() { return } 即可。

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

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

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

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

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

场景三：

WXML

将整个底层页面使用 scroll-view 包裹起来，设置 scroll-y 当显示弹出层的时候为 true， 闭关弹出层的时候为 false

>

WXSS

Page 设置为绝对定位，宽高各百分之百 ， scroll-view 高度 百分之百

Page{

position: absolute;

width: 100%;

height: 100%;

display: block;

overflow-y: hidden;

}