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

不言
リリース: 2018-08-11 17:26:14
オリジナル
8215 人が閲覧しました

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

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

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

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

インターネット上にいくつかの方法が紹介されています
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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!