Heim > Artikel > Web-Frontend > So komponieren Sie die untere Navigation in Uniapp
Uniapps Methode zur Komponentisierung der unteren Navigation: Erstellen Sie zuerst die Seite im Seitenverzeichnis; erstellen Sie dann das Navigationssymbol und konfigurieren Sie schließlich die TabBar unter der Datei [pages.json].
Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, Dell G3-Computer.
Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial
Uniapps Methode zur Komponentisierung der unteren Navigation:
TabBar-Parameterbeschreibung
Farbe: Schriftart der Navigationsleiste. Farbe
ausgewählte Farbe : die Farbe der ausgewählten Schriftart
backgroundColor: die untere Hintergrundfarbe
borderStyle: die untere Randfarbe, die nur „schwarz“ oder „weiß“ sein kann
list: Objekt, einschließlich der folgenden Optionen
{ pagePath:页面路径 text:底部导航文字 iconPath:没选中前的图标路径 selectedIconPath:选中后的图标路径 }
Schritt eins: Erstellen Sie eine Seite im Seitenverzeichnis Navigationssymbol
(1) Öffnen Sie die Alibaba-Vektorsymbolbibliothek (Iconfont)
(2) Suchen Sie das entsprechende Symbol und fügen Sie es dem Warenkorb hinzu(3) Wählen Sie die entsprechende Farbe und das entsprechende Format zum Herunterladen aus
Schritt 3: Auf den Seiten TabBar in .json-Datei konfigurieren{ "pages":[ ... ], "tabBar": { "color":"#8a8a8a", "selectedColor":"#00aa00", "borderStyle":"black", "backgroundColor":"#ffffff", "list": [ { "pagePath":"pages/index/index", "text":"首页", "iconPath":"static/home_normal.png", "selectedIconPath":"static/home.png" }, { "pagePath":"pages/search/search", "text":"发现", "iconPath":"static/search_normal.png", "selectedIconPath":"static/search.png" }, { "pagePath":"pages/me/me", "text":"我的", "iconPath":"static/me_normal.png", "selectedIconPath":"static/me.png" } ] }, "globalStyle": { ... } }Effektanzeige
Verwandte kostenlose Lernempfehlungen:
Programmiervideo
Das obige ist der detaillierte Inhalt vonSo komponieren Sie die untere Navigation in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!