WeChat-Applet implementiert Suchfeldfunktion

In diesem Artikelbeispiel wird der spezifische Code für das WeChat-Applet zur Implementierung der Suchfeldfunktion zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Wirkung:

wxml-Datei:

<Klasse anzeigen="Sucheingabe" >
        <navigator url="/pages/search/search" open-type="navigate" class="navigator">
       <text class="iconfont icon-guanbi"></text> Suche</navigator>
</Ansicht>

Der Icon-Stil muss in den Text importiert werden, hier verwenden wir Iconfont
URL ist die Seite, auf die umgeleitet werden soll

.Sucheingabe {
  Höhe: 90rpx;
  Hintergrundfarbe: #eb4450;
  Polsterung: 10rpx;
} 
.Sucheingabe .navigator{
  Hintergrundfarbe: #fff;
  Höhe: 100%;
  Anzeige: Flex;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Randradius: 15rpx;
  Farbe: #999;
  Schriftgröße: 32rpx;
}

In .js:

Wenn die Komponente auf den globalen Stil verweist, müssen Sie die folgenden Attribute hinzufügen

Optionen: {
      addGlobalClass:true,
  },

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.