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!