미니 프로그램: 마스크 레이어 클릭 후 마스크 레이어 아래 반응이 일어나는 것을 방지하는 솔루션-미니 프로그램 개발-php.cn

미니 프로그램: 마스크 레이어 클릭 후 마스크 레이어 아래 반응이 일어나는 것을 방지하는 솔루션

不言

풀어 주다： 2018-08-11 17:26:14

원래의

8275명이 탐색했습니다.

이 글의 내용은 미니 프로그램에 관한 것입니다. 마스크 레이어를 클릭한 후 마스크 레이어 아래의 반응을 방지하는 솔루션입니다. 도움이 필요한 친구들이 참고하면 도움이 될 것입니다. 당신.

최근 커스텀 팝업창을 만들고 있는데, 마스크 레이어나 마스킹 레이어 사용은 불가피합니다.

그러나 중요한 점은 마스크 레이어가 있는 후에도 마스크 레이어 아래의 구성 요소를 클릭하면 여전히 클릭 이벤트가 생성된다는 것입니다.

이 문제를 해결하는 방법은 무엇입니까?

인터넷에는 여러 가지 방법이 나와 있습니다.
1. 마스크 레이어 뷰에 catchtouchmove 클릭 이벤트를 추가합니다. catch 이벤트 바인딩은 버블링 이벤트가 버블링되는 것을 방지할 수 있기 때문입니다.

<view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showMask}}"/>

로그인 후 복사

2. 동적으로 위치 추가:fixed;

<view style="{{hasMask?&#39;position:fixed;&#39;:&#39;&#39;}}>
    小程序弹出层点击穿透问题
    <button bindtap=&#39;showMask&#39;>弹出遮罩层</button>
</view>

로그인 후 복사

연습을 통해 인터넷에서 처음 언급된 두 가지는 불가능합니다. 첫 번째는 내 자세가 잘못된 것인지 궁금합니다. 두 번째 유형은 순수한 속임수입니다! 아니면 그의 프로젝트가 성공했던 것은 단지 우연이었을 수도 있습니다.

아래에 소개된 방법이 아주 좋습니다.

3. wx:if 및 wx:else 또는 hide를 사용하여 디스플레이를 제어하세요. 마스크 레이어가 팝업되면 구성 요소가 표시되지 않습니다.
wx:if 또는 Hidden을 사용하는 경우 일반적으로 wx:if의 전환 비용이 더 높고 Hidden의 경우 초기 렌더링 비용이 더 높습니다. 따라서 빈번한 전환이 필요한 경우에는 hided가 더 좋고, 런타임 시 조건이 변경될 가능성이 없으면 wx:if가 더 좋습니다. 지침은 공식 문서를 참조하세요.

<!-- 遮罩层  --><view class="mask" wx:if="{{hasMask}}"/><view wx:else=&#39;{{!hasMask}}&#39; style=&#39;text-align:center;margin-top:50px;&#39;>
    <!-- 这里是不希望被点击的组件 …… -->
  <button bindtap="showMask" type=&#39;primary&#39; style=&#39;width:50%;&#39; >点我弹窗</button></view>

로그인 후 복사

다음은 마스크 레이어 스타일에 대한 간략한 설명입니다

 /* 遮罩层 */.mask{  width: 100%;  height: 100%;  background: #000;  opacity: 0.5;  z-index: 9000;}

로그인 후 복사

문제에 대한 해결책은 수천 가지가 있으며 각도를 변경하면 예상치 못한 이득을 얻을 수 있습니다.

프로젝트 주소: https://github.com/MoTec95/CustomPop