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
Eine kurze Diskussion über den virtuellen Speicher von Linux
Inhaltsverzeichnis Herkunft Virtueller Speicher P...
Hinweise zum Proc-Dateisystem des Linux-Kernel-Gerätetreibers
/***************** * proc-Dateisystem************...
Vue-Methode zum Überprüfen, ob der Benutzername verfügbar ist
In diesem Artikelbeispiel wird der spezifische Co...
HTML-Hyperlinks im Detail erklärt
Hyperlink Hyperlinks sind die am häufigsten verwen...
Detaillierte Erläuterung der Einführung in die JavaScript-Funktion
Inhaltsverzeichnis Funktionseinführung Funktion E...
Detaillierte Erläuterung der MySQL-Methode zur Optimierung der Reihenfolge nach Anweisung
In diesem Artikel erfahren Sie mehr über die Opti...
V-Bind in Vue verstehen
Inhaltsverzeichnis 1. Analyse des wichtigsten Que...
Vue implementiert einfache Rechnerfunktion
In diesem Artikelbeispiel wird der spezifische Co...
So handhaben Sie Bilder in Vue-Formularen
Frage: Ich habe in Vue ein Formular zum Hochladen...
Gängige Methoden zur Optimierung der Docker-Imagegröße
Die Docker-Images, die wir normalerweise erstelle...
Detaillierte Erläuterung der Ereignisschleifen-Ereigniswarteschlange von js im Browser
Inhaltsverzeichnis Vorwort Einen Stapel und zwei ...
Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte
In diesem Artikelbeispiel wird der spezifische Im...
So konvertieren Sie Chinesisch in HTML in UTF-8
In HTML kann die chinesische Phrase „學好好學“ als „學...
So implementieren Sie das automatische Herunterfahren von Linux bei schwacher Batterie
Vorwort Die Stromversorgung in meiner Wohnung ist...
Diagramm zur Installation von VMware 14 unter Windows 10
Software-Download Link zum Herunterladen der Soft...