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)

(3) Wählen Sie die entsprechende Farbe und das entsprechende Format zum Herunterladen aus

{ "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": { ... } }

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!