WeChatアプレットの入力レベルとテキストエリアレベルの浸透率が高すぎる問題の解決策

WeChat ミニプログラムのネイティブコンポーネントであるカメラ、キャンバス、入力 (フォーカスされているときのみネイティブコンポーネントとして動作します)、ライブプレーヤー、ライブ、プッシャー、マップ、テキストエリア、ビデオは、最も高い階層を持ちます。ページ上の他のコンポーネントの z-index をどれだけ設定しても、ネイティブコンポーネントをカバーすることはできません。

ここに画像の説明を挿入

図の効果から、入力コンテンツが選択リストのカスタムコンポーネントに浸透していることがわかります。解決策は次のとおりです。
1. 選択リストがトリガーされたときに入力またはテキストコンポーネントを非表示にするには、if を使用します。選択が完了したら、[確認] をクリックして選択リストを閉じ、入力またはテキストを表示します。
2. リストからカスタムコンポーネントを選択し、view と image の代わりに cover-view と cover-image コンポーネントを使用します。cover-view と cover-image コンポーネントは、一部のネイティブコンポーネントでカバーできます。

<カバービュー class="カバービュー" style="{{height}}" wx:if="{{isShowModel}}">
    <カバービュークラス="selectModel">
      <カバービュークラス="モデル" @tap="onShowOrHideModel()"></カバービュー>
      <カバービュークラス="modelBox">
        <cover-view class="title">{{title}}(複数選択可能)</cover-view>
        <カバービュークラス="リスト">
          <block wx:for="{{waitClassifyNamesList}}" wx:key="{{index}}">
            <カバービュークラス="li" @tap="onClickSelect({{item.optionCode}})">
              <カバーイメージ wx:if="{{filter.isInclude(item.optionCode,classifyIds)}}" class="icon" src="/image/signatory/selected.png"></カバーイメージ>
              <カバーイメージ class="icon" src="/image/signatory/unSelect.png" wx:else></カバーイメージ>
              <カバービュー class="name">{{item.optionName}}</カバービュー>
            </カバービュー>
          </ブロック>
        </カバービュー>
        <cover-view class="btn" @tap="onSubmitSelectService">確認</cover-view>
      </カバービュー>
    </カバービュー>
  </カバービュー>

ここに画像の説明を挿入

2つの方法の実施効果は上図の通りです。どちらの方法を選択するかは、実際のニーズに応じて選択してください。

WeChatミニプログラム入力とテキストエリアレベルの過度な浸透の問題を解決する方法についてのこの記事はこれで終わりです。より関連性の高いミニプログラム入力とテキストエリア浸透コンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません: