uniapp阻止遮罩层穿透滚动

原因

做列表页的时候大部分都带有筛选功能，这个时候弹框也是必不可少的，在使用弹窗的时候，如果弹窗内容过多的话，这个时候再继续往下滑动时，会发现遮罩层下的列表也跟着滚动

解决办法

在页面配置page-meta组件page-style的属性设置overflow:hidden;

注：page-meta组件 页面属性配置节点，用于指定页面的一些属性、监听页面事件。可部分替代pages.json的功能。 链接: uniapp.dcloud.net.cn/component/p…

页面代码

//放在最上层
//rollStatus 弹窗状态，弹窗弹出时为true，关闭时为false
<page-meta :page-style="rollStatus?'overflow:hidden;':'overflow:visible;'"></page-meta>

注意

overflow:hidden;方法在ios端如果无效，可以这样写CSS

overflow: hidden;
-webkit-appearance: none;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);