So verwenden Sie uni-app, um Schaltflächen und Suchfelder in der oberen Navigationsleiste anzuzeigen
|
Vor Kurzem bereitete sich das Unternehmen auf die Entwicklung einer App vor und entschied sich schließlich für die Verwendung des Uni-App-Frameworks für die Entwicklung. Als ich jedoch die Entwurfszeichnung erhielt, war ich etwas unsicher, da die Oberseite der Entwurfszeichnung folgendermaßen aussah:
Da diese Funktion im Applet nicht verfügbar ist, bin ich der Meinung, dass sie nicht implementiert werden kann. Ich habe mir das Dokument jedoch noch einmal angesehen und festgestellt, dass diese Funktion implementiert werden kann. Ich muss nur einige Konfigurationen in pages.json vornehmen. Dies wird offiziell als App-Plus bezeichnet und ermöglicht es Ihnen, den Navigationsbereich anzupassen. Die spezifische Konfiguration ist wie folgt:
"Seiten": [
{
"Pfad": "Seiten/Index/Index",
"Stil": {
"navigationBarBackgroundColor": "#00c170",
"App-Plus": {
"Bounce": "keine",
"TitelNAnsicht": {
"Schaltflächen": [
{
"text": "Karte",
"Schriftgröße": "16",
"float": "rechts",
"Farbe": "#fff"
},
{
"Text": "Tangshan",
"Schriftgröße": "16",
"float": "links",
"Farbe": "#fff"
}
],
"Sucheingabe":{
"align": "zentriert",
"Platzhalter": "Bitte geben Sie die Informationen zur Suche nach Eigenschaften ein",
"borderRadius": "50upx",
"Hintergrundfarbe": "#fff"
}
}
}
}
} ]Die Wirkung ist wie folgt:
Sie fragen sich vielleicht, wie ich meine Klick- und Eingabefeldereignisse überwache? uni-app stellt die entsprechenden APIs, onNavigationBarButtonTap und onNavigationBarSearchInputChanged, zur Verfügung, die in die Antwortseite geschrieben werden können:
Standard exportieren {
onNavigationBarButtonTap() {
console.log("Sie haben auf die Schaltfläche geklickt")
},
onNavigationBarSearchInputChanged () {
console.log("Sie haben Informationen eingegeben")
}
}Druckergebnisse:
Aber es gibt zwei Schaltflächen, aber nur ein Schaltflächenereignis. Was soll ich tun? Wie bekomme ich den Text in das Eingabefeld? Tatsächlich erhalten diese beiden Funktionen einen Wert, der die entsprechenden Informationen darstellt:
Standard exportieren {
beiNavigationBarButtonTap(Wert) {
console.log(Wert)
},
onNavigationBarSearchInputChanged (Wert) {
console.log(Wert)
}
}Druckergebnisse:
Das Schaltflächenereignis kann anhand des entsprechenden Textes beurteilt werden, und das Eingabefeld hört auf das Eingabeereignis anstelle des Änderungsereignisses, d. h. es kann nach der Eingabe abgehört werden, anstatt den Fokus zu verlieren Glauben Sie, das ist das Ende? Nein, nein, nein, aufmerksame Studenten haben festgestellt, dass das, was ich gemacht habe, vom Entwurf abwich. Auf der rechten Karte befindet sich ein Symbol, das ich nicht geschrieben habe. Wenn Sie der obigen Methode folgen, können Sie es nicht hinzufügen, aber wir können die Anpassung der Navigationsleiste entfernen. Die Navigationsleiste jeder Seite in page.json ist standardmäßig aktiviert. Es gibt ein navigationStyle-Attribut mit dem Standardwert default. Wir können es entfernen, indem wir es in benutzerdefiniert ändern:
{
"Pfad": "Seiten/Index/Index",
"Stil": {
"Navigationsstil": "benutzerdefiniert"
}Die mobile Navigation ist jedoch immer noch vorhanden. Dazu müssen wir das Attribut titleNView verwenden, mit dem die Navigationsleiste speziell wie folgt festgelegt wird:
{
"Pfad" : "Seiten/zweiteSeite/zweiteSeite",
"Stil" : {
"navigationStyle": "benutzerdefiniert",
"App-Plus": {
"titleNView": falsch
}
}
}Dann können wir selbst einen Navigationssatz schreiben und der endgültige Effekt ist wie folgt:
Hier gibt es jedoch eine Falle. Zusätzlich zur Festlegung einer festen Position für diese Navigation ist die Statusleiste oben auf dem Telefon tatsächlich transparent, da wir die Standardnavigation entfernt haben:
Daher ist beim Schreiben der Navigation der obere Rand etwas größer als der untere Rand, um sicherzustellen, dass die Statusleiste abgedeckt ist. Hier ist der Quellcode, den ich geschrieben habe:
<Vorlage>
<Klasse anzeigen="Kopf">
<Ansichtsklasse="header-wrap">
<Klasse anzeigen="index-header">
<text class="Adresse" v-if="leftWords">{{leftWords}}</text>
<Ansicht Klasse="Eingabe-Wrap" v-if="Eingabe">
<Eingabetyp="Text"
Platzhalter="Bitte geben Sie Ihre Suche ein"
v-Modell="Wert"
@change="Eingabeänderung"/>
<text Klasse = "Iconfont Iconfangdajing"></text>
</Ansicht>
<Ansichtsklasse="map-wrap"
v-if="richtigeWörter||richtigesSymbol"
@click="Rechtsklick">
<text Klasse="iconfont" :Klasse="rightIcon"></text>
<text>{{richtigeWörter}}</text>
</Ansicht>
</Ansicht>
</Ansicht>
<Ansichtsklasse="blank"></Ansicht>
</Ansicht>
</Vorlage>
<Skript>
Standard exportieren {
Name: "IndexHeader",
Requisiten: [
'linkeWörter',
'Eingang',
'rechtesSymbol',
„richtige Worte“
],
Daten () {
zurückkehren {
Wert: ''
}
},
Methoden: {
Eingabeänderung: Funktion () {
dies.$emit('ändern',dieser.Wert)
},
Rechtsklick: Funktion () {
dies.$emit("Rechtsklick")
}
}
}
</Skript>
<style lang="scss">
$Farbbasis: #00c16f;
$words-color-base: #333333;
$words-color-light: #999999;
.header-wrap {
Breite: 100 %;
Position: fest;
oben: 0;
Z-Index: 999;
.index-header {
Höhe: 88upx;
Zeilenhöhe: 88upx;
Polsterung: 0 30upx;
Polsterung oben: 40upx;
Hintergrundfarbe: $color-base;
Schriftgröße: 28upx;
Farbe: #fff;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: Abstand dazwischen;
.Adresse {
Schriftgröße: 26upx;
}
.Eingabe-Wrap {
Breite: 500upx;
Höhe: 70upx;
Polsterung: 10upx 30upx 10upx 100upx;
Box-Größe: Rahmenbox;
Hintergrundfarbe: #fff;
Rahmenradius: 50upx;
Farbe: $words-color-base;
Position: relativ;
text {
Position: absolut;
links: 40upx;
oben: -8upx;
Farbe: $words-color-light;
Schriftgröße: 30upx;
}
}
.map-wrap {
.iconfont {
Schriftgröße: 32upx;
Rand rechts: 5upx;
}
text {
Schriftgröße: 26upx;
}
}
}
}
.leer {
Höhe: 126upx;
}
</Stil>Oben finden Sie Einzelheiten zur Verwendung von Uni-App zum Anzeigen von Schaltflächen und Suchfeldern in der oberen Navigationsleiste. Weitere Informationen zur Verwendung von Uni-App zum Anzeigen von Schaltflächen und Suchfeldern in der oberen Navigationsleiste finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! Das könnte Sie auch interessieren:
|
<<: Windows 10 1903 Fehler 0xc0000135 Lösung [empfohlen]
>>: Einführung in MyCat, die Datenbank-Middleware
Artikel empfehlen
Zwei praktische Möglichkeiten zum Aktivieren des Proxys in React
Zwei Möglichkeiten zum Aktivieren des Proxy React...
JavaScript implementiert die zufällige Generierung von Bestätigungscode und Bestätigung
In diesem Artikel wird der spezifische Code von J...
Beheben Sie den Fehler beim Löschen von MySQL-Benutzern
Als der Autor MySQL zum Hinzufügen eines Benutzer...
Das Docker-Maven-Plugin-Plugin kann das entsprechende JAR-Paket nicht abrufen
Bei Verwendung des Plug-Ins „Docker-Maven-Plugin“...
Untersuchung des Problems der Flip-Navigation mit geneigter Maus
In diesem Artikel analysieren wir als Beispiel die...
Detaillierte Erläuterung des Prinzips und der Praxis der MySQL-Master-Slave-Replikation
Inhaltsverzeichnis Einführung Wirkung Prinzip bil...
Detaillierte Erklärung der berechneten Eigenschaften in Vue
Inhaltsverzeichnis Interpolationsausdrücke Method...
Eine kurze Analyse der Grundkonzepte von HTML-Webseiten
Was ist eine Webseite? Die Seite, die nach dem HT...
jQuery implementiert einen einfachen Karusselleffekt
Hallo zusammen, heute werde ich die Implementieru...
So verwenden Sie JavaScript zum Implementieren von Sortieralgorithmen
Inhaltsverzeichnis Blasensortierung Auswahl Sorti...
Eine kurze Diskussion über den Linux-Signalmechanismus
Inhaltsverzeichnis 1. Signalliste 1.1. Echtzeitsi...
Beispiel für die Konvertierung eines eindimensionalen JS-Arrays in ein dreidimensionales Array
Heute habe ich gesehen, wie ein Freund im Q&A...
Zusammenfassung der unbekannten Verwendung von "!" in Linux
Vorwort Tatsächlich gibt es für das bescheidene „...
Eine Fallstudie zur MySQL-Optimierung
1. Hintergrund Auf jeder OLTP-Datenbankinstanz vo...
Beschreiben Sie kurz den Unterschied zwischen MySQL und Oracle
1. Oracle ist eine große Datenbank, während MySQL...