principle:
When the mask is opened and the content part is scrolled to the bottom, continuing to swipe will cause the underlying page to scroll, which is scroll penetration.
However, due to the platform itself, except for the h5 platform, other platforms cannot prohibit scrolling penetration in the component, so users need to deal with it in WeChat applets, App platforms, and pages.
solve:
On 微信小程序/App the platform, components can be used page-meta to dynamically modify the page style,
It is necessary to define a variable in data to indicate uni-popup the on/off status (other masks are also available), and modify the attribute through this page-meta variable overflow .
code:
<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
tips:
- h5 scroll penetration does not need to be processed
- wx and app need to use page-meta components to prevent scroll penetration
- Pay attention to the page-meta component, only one page can exist
- Other platforms cannot prevent scroll penetration. It is recommended to use scroll-view scrolling and manually set overflow:hidden, which is consistent with the page-meta method
Replenish:
sleep app
<page-meta :page-style="'overflow:'+(showOverlay?'hidden':'visible')"></page-meta>
If compiling to h5, you need to add the method:
The following is the prohibition of scrolling after the mask is turned on
openOverlay() {
this.showOverlay = true;
let uniPlatform = uni.getSystemInfoSync().uniPlatform;
// H5禁止滚动
if (uniPlatform == 'web') {
var mo = function(e) {
e.preventDefault();
};
document.body.style.overflow = 'hidden';
document.addEventListener("touchmove", mo, false); //Prohibit page sliding
}
},
//Close the mask
closeOverLay: function() { this.showOverlay = false; let uniPlatform = uni.getSystemInfoSync().uniPlatform; if (uniPlatform == 'web') { var mo = function(e) { e. preventDefault(); }; document.body.style.overflow = ''; //A scroll bar appears document.removeEventListener("touchmove", mo, false); } },