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
Docker-Verbindung – MongoDB-Implementierungsprozess und Codebeispiele
Nachdem der Container gestartet wurde Melden Sie ...
Fragen zum Vorstellungsgespräch zu JS 9 Promise
Inhaltsverzeichnis 1. Mehrere .catch 2. Mehrere ....
HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag
Mit dem Tag <tfoot> wird der Stil der Tabel...
Implementierungscode für die HTML-Tabellenrahmensteuerung
Wenn wir eine Tabelle verwenden, weisen wir ihr i...
TypeScript-Union-Typen, Schnittmengentypen und Typwächter
Inhaltsverzeichnis 1. Union-Typ 2. Crossover-Typ ...
MySQL implementiert Ranking und fragt die angegebene Benutzer-Ranking-Funktion ab (parallele Ranking-Funktion) Beispielcode
Vorwort Dieser Artikel stellt hauptsächlich die r...
Drei Möglichkeiten zur Implementierung von Animationen in CSS3
Hiermit werden die Grundkenntnisse des Interviewt...
Beispiel für die Implementierung des TikTok-Textschütteleffekts mit CSS
In der täglichen Entwicklung streiten sich Front-...
Lassen Sie uns ausführlich über Vues Mixin und Vererbung sprechen
Inhaltsverzeichnis Vorwort Mischen Mixin-Hinweis ...
Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 1) (Teil 35)
Der erste Artikel zum Thema Datensicherung und -w...
Eine kurze Erläuterung des Navigationsfensters in Iframe-Webseiten
Eine kurze Erläuterung des Navigationsfensters in...
Detaillierte Analyse der MySQL-Abfrageabfangung
Inhaltsverzeichnis 1. Abfrageoptimierung 1. MySQL...
JavaScript zur Implementierung der Schaltfläche „Zurück nach oben“
In diesem Artikel wird der spezifische Code für J...
Sprungcode für HTML-Seite
Speichern Sie den folgenden Code als Standard-Home...
Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets
1. Was ist Docker Secret 1. Szenariodarstellung W...