Heim  >  Artikel  >  Web-Frontend  >  So komponieren Sie die untere Navigation in Uniapp

So komponieren Sie die untere Navigation in Uniapp

coldplay.xixi
coldplay.xixiOriginal
2020-12-09 11:37:573698Durchsuche

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].

So komponieren Sie die untere Navigation in Uniapp

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) So komponieren Sie die untere Navigation in Uniapp

(2) Suchen Sie das entsprechende Symbol und fügen Sie es dem Warenkorb hinzu

So komponieren Sie die untere Navigation in Uniapp (3) Wählen Sie die entsprechende Farbe und das entsprechende Format zum Herunterladen aus

Schritt 3: Auf den Seiten TabBar in .json-Datei konfigurieren

So komponieren Sie die untere Navigation in Uniapp

{
      "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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn