解决微信小程序滑动遮罩时底层跟着滑动的问题

（开发小程序的时候用的是mpvue框架 + wux组件 + vue）

开发小程序的时候碰到过这么一个比较坑的问题：打开自定义弹窗的时候，滑动遮罩时底层的内容会随着手指滑动而发生滑动(即滚动穿透)，这点在安卓系统上问题还不是很大，在ios系统上时简直让人抓狂

如：手指滑动截图中的遮罩，或者弹窗中的空白区域(红框区域)，底层页面也会发生滚动，在IOS上，如果底层的滚动不停止，则弹窗中的内容无法滑动。。。

我的解决方案如下：

第一步：先找到pages.js文件设置 disableScroll: true

 这一步的目的就是禁止页面滚动

第二步：由于第一步的设置会导致页面无法滚动，如果页面内容的高度超出屏幕的高度就无法看到超出的内容了，此时需要在页面中使用微信小程序的scroll-view组件

<scroll-view :scroll-y="isScrollAble" :style="scrollViewHeight">

<scroll-view>

在script中初始化一下

data() {
return {
isScrollAble: true,
scrollViewHeight: ''
}
}

然后在methods中写一个获取手机屏幕的高度的方法，然后在onLoad()中调用一下

get_window_height() {
const self = this
wx.getSystemInfo({
success(res) {
self.scrollViewHeight = 'height:' + res.windowHeight + 'px;'
}
})
}

最后，在触发自定义弹窗组件打开的时候，设置一下isScrollAble为false(禁止滚动)，关闭的时候则设置为true(开启滚动)即可

PS:因为我用的是第三方框架进行的小程序开发，如果使用的是小程序原生的话部分语法需要相应的修改