Mini programme : une solution pour empêcher la réaction sous le calque de masque de se produire après avoir cliqué sur le calque de masque

Le contenu de cet article concerne le mini programme : la solution pour empêcher la réaction sous le calque de masque après avoir cliqué sur le calque de masque. Il a une certaine valeur de référence. J'espère que ce sera le cas. utile pour vous.

Récemment, je crée une fenêtre pop-up personnalisée, et il est inévitable d'utiliser un calque de masque ou un calque de masquage.

Mais l'essentiel est qu'après avoir créé un calque de masque, cliquer sur le composant situé sous le calque de masque générera toujours un événement de clic.

Alors comment résoudre ce problème ?

Il existe plusieurs méthodes disponibles en ligne
1 Ajoutez l'événement de clic catchtouchmove dans la vue du calque de masque. Parce que la liaison d'événement catch peut empêcher les événements bouillonnants de se propager vers le haut.

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

2. Ajoutez dynamiquement position:fixed;

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

à la page sous-jacente. Grâce à la pratique, les deux premiers mentionnés sur Internet ne sont pas réalisables. Je ne sais pas si c'est le cas. Ce n'est pas que ma posture est mauvaise ! Le deuxième type est une pure tromperie ! Ou peut-être était-ce simplement une coïncidence si son projet a fonctionné.

La méthode présentée ci-dessous est très bonne.

3. Utilisez wx:if et wx:else ou caché pour contrôler l'affichage. Lorsque le calque de masque apparaît, le composant n'est pas affiché.
En ce qui concerne l'utilisation de wx:if ou caché, d'une manière générale, wx:if a un coût de commutation plus élevé et caché a un coût de rendu initial plus élevé. Par conséquent, si des commutations fréquentes sont nécessaires, Hidden est préférable et wx:if est préférable s'il est peu probable que les conditions changent au moment de l'exécution. Vous pouvez vous référer à la documentation officielle pour obtenir des instructions.

<!-- 遮罩层  --><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>

Voici une brève présentation du style de la couche de masque

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

Il existe des milliers de solutions au problème, et vous obtiendrez des gains inattendus si vous changer l'angle.

Adresse du projet : https://github.com/MoTec95/CustomPop

Recommandations associées :

Exemple de mini-programme WeChat : Partager avec une personne Ou le code de jugement à partager avec le groupe

Comment limiter la taille de l'applet WeChat lors du téléchargement de photos (avec code)

Mini programme : comment ajouter et supprimer dynamiquement un tableau d'objets JSON (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!