弹出 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
<scroll-view scroll-y="{ {showModalStatus?'true':'false'}}" style="height:{ {windowHeight}}px"> </scroll-view>
WXSS
Page 设置为绝对定位,宽高各百分之百 , scroll-view 高度 百分之百
Page{
position: absolute;
width: 100%;
height: 100%;
displa