Lösung für das Problem der zu hohen Durchdringung von Eingabe- und Textbereichsebenen im WeChat-Applet

Die nativen Komponenten des WeChat-Miniprogramms Kamera, Canvas, Eingabe (verhält sich nur bei Fokussierung wie eine native Komponente), Live-Player, Live, Pusher, Karte, Textbereich und Video haben die höchste Hierarchie. Unabhängig davon, wie hoch der Z-Index anderer Komponenten auf der Seite eingestellt ist, können sie die nativen Komponenten nicht abdecken.

Anhand der Wirkung in der Abbildung können wir erkennen, dass der Eingabeinhalt in die benutzerdefinierte Komponente der Auswahlliste eindringt. Die Lösung lautet:
1. Verwenden Sie if, um die Eingabe- oder Textfeldkomponente auszublenden, wenn die Auswahlliste ausgelöst wird. Wenn die Auswahl abgeschlossen ist, klicken Sie auf Bestätigen, um die Auswahlliste zu schließen und die Eingabe- oder Textfeldkomponente anzuzeigen.
2. Wählen Sie die benutzerdefinierten Komponenten in der Liste aus und verwenden Sie die Komponenten „Cover-Ansicht“ und „Cover-Bild“ anstelle von „Ansicht“ und „Bild“. Die Komponenten „Cover-Ansicht“ und „Cover-Bild“ können auf einigen nativen Komponenten abgedeckt werden.

<cover-view Klasse="cover-view" Stil="{{Höhe}}" wx:if="{{isShowModel}}">
    <cover-view Klasse="Modell auswählen">
      <cover-view Klasse="Modell" @tap="onShowOrHideModel()"></cover-view>
      <cover-view Klasse="ModellBox">
        <cover-view class="title">{{title}}(Mehrfachauswahl möglich)</cover-view>
        <cover-view Klasse="Liste">
          <block wx:for="{{waitClassifyNamesList}}" wx:key="{{index}}">
            <cover-view class="li" @tap="onClickSelect({{item.optionCode}})">
              <cover-image wx:if="{{filter.isInclude(item.optionCode,classifyIds)}}" class="icon" src="/image/signatory/selected.png"></cover-image>
              <cover-image class="icon" src="/image/signatory/unSelect.png" wx:else></cover-image>
              <cover-view class="name">{{item.optionName}}</cover-view>
            </Cover-Ansicht>
          </block>
        </Cover-Ansicht>
        <cover-view class="btn" @tap="onSubmitSelectService">Bestätigen</cover-view>
      </Cover-Ansicht>
    </Cover-Ansicht>
  </Cover-Ansicht>

Die Implementierungseffekte der beiden Methoden sind in der obigen Abbildung dargestellt. Welche Methode Sie wählen, hängt vom tatsächlichen Bedarf ab.

Dies ist das Ende dieses Artikels zur Lösung des Problems der übermäßigen Durchdringung der WeChat-Miniprogrammeingabe- und Textbereichsebenen. Weitere relevante Inhalte zur Miniprogrammeingabe und Textbereichsdurchdringung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!