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

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

不言オリジナル: 2018-08-11 17:26:148232ブラウズ

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

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

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

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

インターネット上にいくつかの方法が紹介されています
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

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

関連記事

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