Rolling Penetration of Mask layer in WeChat Mini Programs

when using Mini Program"s modal component to achieve the mask layer effect, there will be the problem of scrolling through, that is, the page behind the mask layer can still scroll, is there a solution to this problem?

Mini Program
Apr.08,2022

my solution is:
add catchtouchmove events to block 

    <view wx:if="{{alert}}" catchtouchmove="myCatchTouch">
        <template is="alert" data="{{alertData}}" />
    </view>
  myCatchTouch: function () {
    console.log('stop user scroll it!');
    return;
  },

if there is no scrolling event in the pop-up layer, add catchtouchmove= "move" move:function () {};

directly to the mask.

if there is a scrolling event in the pop-up layer, add a class to the bottom containerView when the pop-up layer appears and remove it when it disappears.

< view class= "{{showSearchView?'tripList_root':''}}" >

.tripList _ root {

    top:0px;

    left: 0px;

    width: 100%;

    height: 100%;

    overflow: hidden;

    position: fixed;

    z-index: 0;

}

  1. personal test is valid.
Add

to the outermost view when the

pop-up window appears 

height: 100vh;
overflow: hidden;

there are two ways: when a mask layer appears, have your
content {overflow:hidden} remove this property when the mask layer disappears

2: this is a more thorough method. When the pop-up window appears, add fixed positioning
body {
position:fixed;
top:0;left:0;right:0;bottom:0;
}

to the body.

this way of writing only tells you the train of thought, but it is not realized by vue. You can write two class and then change the class value according to whether the pop-up window has a trigger selector.

add the class hiddenScroll to your background container when the mask is on, then remove it after the mask is closed 

.hiddenScroll{
    overflow:hidden;
}

tell me the train of thought, the approximate code to achieve this is: 

<!--wxml-->
<view class="mask" wx:if="{{hasMask}}">
    
</view>
<view class="content" style="{{hasMask?'height:100%;overflow:hidden':''}}">
    
</view>
<!-- js -->
Page{
    ...
    showMask(e){
        //
        this.setData({
            hasMask:true
        })
    },
    hideMask(e){
    //
        this.setData({
            hasMask:false
        })
    },
}

feels like a pit. At least I didn't find a way to change the style in < page >. Unless you are not scrolling in < page >.

add a class overflow: hidden style to the tag of the page content when the mask pops up, and remove class when unmasking

https://www.cnblogs.com/apgy/...
is easy to use

add a touchmove event to the element of the mask layer, which is used to prevent event bubbling. The code in preventD is as follows:

preventD () {}

the problem is solved 

page{
   height:100%;
   .hiddenScroll {
     height:100%;
     overflow: hidden;
   }
}

outermost view 

<view class="{{ modalHidden ? '' : 'hiddenScroll' }}">

refer to this article. https://developers.weixin.qq....
first stops the touch event from bubbling during the scrolling of the pop-up layer, and then writes the scrolling of the pop-up layer into the scroll-view component instead of writing in the form of view and overflow-y:scroll, and sets the y-axis scrolling. Trust me if you have any questions 

move(e) {
    console.log(e);
}

Previous: Which is the width/height attribute of video or the width/heigth of css?

Next: Company svn server, accidentally submitted a lot of useless updates, how to restore the svn server to the previous version?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu