ミニ プログラム: マスク レイヤーをクリックした後にマスク レイヤーの下で反応が起こらないようにするソリューション

この記事の内容は、マスクレイヤーをクリックした後の反応を防ぐためのミニプログラムに関するものです。必要な方は参考にしていただければ幸いです。手伝う。

最近カスタムポップアップウィンドウを作っているのですが、どうしてもマスクレイヤーやマスキングレイヤーを使うことになります。

しかし、重要な点は、マスクレイヤーが存在した後でも、マスクレイヤーの下のコンポーネントをクリックするとクリックイベントが生成されるということです。

では、この問題を解決するにはどうすればよいでしょうか?

インターネット上にいくつかの方法が紹介されています
1. マスクレイヤービューに catchtouchmove クリックイベントを追加します。なぜなら、catch イベント バインディングにより、バブリング イベントがバブリングするのを防ぐことができるからです。

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

2.position:fixed;を動的に追加します

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

練習を通じて、インターネットで言及されている最初の 2 つは実行できません。最初の 1 つは、私の姿勢が間違っているのではないかと思います。 2 番目のタイプは純粋な欺瞞です。あるいは、彼のプロジェクトがうまくいったのは単なる偶然かもしれません。

以下で紹介する方法はとても良いです。

3. wx:if と wx:else または hidden を使用して表示を制御します。 マスクレイヤーがポップアップすると、コンポーネントは表示されません。
wx:if と hidden の使用については、一般的に、wx:if の方がスイッチング コストが高く、hidden の方が初期レンダリング コストが高くなります。したがって、頻繁に切り替える必要がある場合は hidden が適しており、実行時に条件が変化する可能性が低い場合は 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

関連推奨事項:

WeChatアプレットの例: 1人またはグループに共有するための判定コード

WeChatアプレットがアップロードする方法画像のサイズを制限する (コードが添付されています)

ミニ プログラム: JSON オブジェクト配列を動的に追加および削除する方法 (コードが添付されています)

以上がミニ プログラム: マスク レイヤーをクリックした後にマスク レイヤーの下で反応が起こらないようにするソリューションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。