Miniprogramm: Eine Lösung, um zu verhindern, dass die Reaktion unterhalb der Maskenebene auftritt, nachdem auf die Maskenebene geklickt wurde

Der Inhalt dieses Artikels befasst sich mit dem Miniprogramm: Die Lösung, um die Reaktion unterhalb der Maskenebene zu verhindern, hat einen gewissen Referenzwert nützlich für Sie.

Vor Kurzem erstelle ich ein benutzerdefiniertes Popup-Fenster und es ist unvermeidlich, eine Maskenebene oder eine Maskierungsebene zu verwenden.

Aber der Schlüssel ist, dass auch nach einer Maskenebene das Klicken auf die Komponente unter der Maskenebene immer noch ein Klickereignis generiert.

Wie kann man dieses Problem lösen?

Es stehen online mehrere Methoden zur Verfügung
1. Fügen Sie das Catchtouchmove-Klickereignis in der Maskenebenenansicht hinzu. Weil die Catch-Ereignisbindung das Aufsprudeln von Bubbling-Ereignissen verhindern kann.

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

2. Position dynamisch hinzufügen:fixed;

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

Durch Übung sind die ersten beiden im Internet genannten nicht machbar. Die zweite Art ist pure Täuschung! Oder vielleicht war es nur ein Zufall, dass sein Projekt funktionierte.

Die unten vorgestellte Methode ist sehr gut.

3. Verwenden Sie wx:if und wx:else oder versteckt, um die Anzeige zu steuern. Wenn die Maskenebene eingeblendet ist, wird die Komponente nicht angezeigt.
Was die Verwendung von „wx:if“ oder „hidden“ betrifft, so verursacht „wx:if“ im Allgemeinen höhere Wechselkosten und „hidden“ höhere anfängliche Renderingkosten. Wenn daher häufiges Umschalten erforderlich ist, ist „hidden“ besser und „wx:if“ besser, wenn sich die Bedingungen zur Laufzeit wahrscheinlich nicht ändern. Anweisungen finden Sie in der offiziellen Dokumentation.

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

Hier ist ein kurzer Vortrag über den Stil der Maskenebene

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

Es gibt Tausende von Lösungen für das Problem, und eine Änderung des Winkels wird unerwartete Vorteile bringen.

Projektadresse: https://github.com/MoTec95/CustomPop

Verwandte Empfehlungen:

Beispiel für das WeChat Mini-Programm: Mit einer Person teilen Oder der Beurteilungscode zum Teilen mit der Gruppe

So begrenzen Sie die Größe des WeChat-Miniprogramms beim Hochladen von Bildern (mit Code)

Mini Programm: So fügen Sie ein JSON-Objektarray dynamisch hinzu und löschen es (mit Code)

Das obige ist der detaillierte Inhalt vonMiniprogramm: Eine Lösung, um zu verhindern, dass die Reaktion unterhalb der Maskenebene auftritt, nachdem auf die Maskenebene geklickt wurde. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!