Heim > Artikel > Web-Frontend > Wie implementiert man den Titelleistenverlauf in Uniapp?
Wie implementiert man den Titelleistenverlauf in Uniapp?
- 青灯夜游Original
- 2020-12-09 15:59:368974Durchsuche
So implementieren Sie den Titelleistenverlauf in Uniapp: Geben Sie zuerst die Datei „pages.json“ in den Uniapp-Ordner ein und fügen Sie dann den Stil „„backgroundImage“: „linear-gradient (Verlaufswinkel, Startfarbe, Endfarbe)“ zur titleNView hinzu Attribut .
Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Thinkpad T480-Computer.
Empfohlen: „Uni-App-Entwicklungs-Tutorial“
Der Stil in page.js des Uni-App-Projekts stellt nur Konfigurationselemente wie den Titeltext, die Hintergrundfarbe und die Vordergrundfarbe der Seitennavigationsleiste bereit kann in verschiedenen Miniprogrammen verwendet werden. Der Client stellt die meisten benutzerdefinierten Konfigurationselemente nicht zur Verfügung. Auf der App-Seite unterstützt page.json den App-Plus-Knoten, um mehr Konfigurationsparameter bereitzustellen und so eine umfassendere Skalierbarkeit als verschiedene Miniprogramme zu erreichen. Das titleNView-Attribut wird verwendet, um den Stil der Navigationsleiste festzulegen.
Fügen Sie den folgenden Code zur Datei „pages.json“ im Ordner „uniapp“ hinzu, um dies zu erreichen
„backgroundImage“: „linear-gradient(to right, #FFDE28,#FF3228)“
{
"path": "pages/mySuccessOrder/mySuccessOrder", "style": {
"navigationBarTitleText": "支付", "app-plus": {
"titleNView": {
"backgroundImage":"linear-gradient(to right, #FFDE28,#FF3228)"
}
}
}}
Ergebnis:
linear-gradient()-Funktion Die
linear-gradient()-Funktion wird verwendet, um ein Bild zu erstellen, das einen linearen Farbverlauf aus zwei oder mehr Farben darstellt.
Um einen linearen Farbverlauf zu erstellen, müssen Sie zwei Farben angeben. Sie können auch Farbverlaufseffekte in verschiedenen Richtungen erzielen (angegeben als Winkel). Wenn die Richtung nicht angegeben ist, erfolgt der Farbverlauf standardmäßig von unten nach oben.
Syntax:
linear-gradient(direction, color-stop1, color-stop2, ...)
Richtung Verwenden Sie den Winkelwert, um die Richtung (oder den Winkel) des Farbverlaufs anzugeben.
color-stop1, color-stop2,... Wird verwendet, um die Start- und Endfarben des Farbverlaufs anzugeben.
Beispiel:
1. Linearer Farbverlauf von links beginnend, von rot nach gelb:
linear-gradient(to right, red , yellow)
2. Linearer Farbverlauf von der oberen linken Ecke zur unteren rechten Ecke
3 . Mehr A-Terminierungsfarbe
linear-gradient(to bottom right, red , yellow)
Programmiervideo! !
Das obige ist der detaillierte Inhalt vonWie implementiert man den Titelleistenverlauf in Uniapp?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!