小程序弹出的遮罩只有一屏高度，滚动显示出下面的UI

问题：弹出的遮罩，由于没有处理小程序的滚动击穿，在遮罩下的滚动视图如果很长，则滑动页面，遮罩也滚动，没有全屏。

解决办法：将遮罩的高度设置为滚动页面内容的高度。

步骤：需要获取滚动页面的高度，获取屏幕的高度。如果滚动内容的高度大于屏幕高，则设置遮罩style高度为滚动内容的高度，否则设置为屏幕高度。

获取高度的代码：

.js

calculateScrollViewHeight() {

let that = this;

let query = wx.createSelectorQuery();

query.select('#scrollview').boundingClientRect();

query.selectViewport().scrollOffset();

query.exec(function (res) {

let height = res[0].height;

wx.getSystemInfo({

success: function (res) {

let mainHeight = height>res.windowHeight?height:res.windowHeight

that.setData({

mainHeight

})

}

});

});

},

在弹出遮罩的方法中，调用此方法

this. calculateScrollViewHeight();

.wxml

<view class = "mainPage" id = "scrollview">

最后，在需要设置高度的地方使用：

height:{{mainHeight}}px