解決微信小程序滑動遮罩時底層跟着滑動的問題

（開發小程序的時候用的是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:因為我用的是第三方框架進行的小程序開發，如果使用的是小程序原生的話部分語法需要相應的修改