Heim >Web-Frontend >uni-app >So zeigen Sie die Tableiste in Uniapp an
So zeigen Sie die Tableiste in Uniapp an: Zuerst stellt das erste Element im Seitenarray die Anwendungsstartseite dar; dann konfigurieren Sie es in der Datei [page.js], der Code lautet ["Pfad": "pages/show/show". ","style ": {"navigationBarT】
Die Betriebsumgebung dieses Tutorials: Windows7-System, Uni-App2.5.1-Version, diese Methode ist für alle Computermarken geeignet
Empfohlen (kostenlos). ): uni-app. Entwicklungs-Tutorial
So zeigen Sie die Tableiste in Uniapp an:
Schauen Sie sich zunächst die offizielle Website an, um mehr über tabBar zu erfahren.
Wenn es sich bei der Anwendung um eine Multi-Tab-Anwendung handelt, können Sie dies tun Geben Sie die Leistung der Tab-Leiste über das TabBar-Konfigurationselement sowie die Anzeige beim Tab-Wechsel an.
Wenn die Position auf „oben“ eingestellt ist, wird das Symbol in der TabBar nicht angezeigt , und es können nur mindestens 2 und maximal 5 Registerkarten konfiguriert werden. Die Registerkarten werden in der Reihenfolge des Arrays sortiert.
Die Registerkartenleiste wird möglicherweise nicht rechtzeitig gerendert kann im onLoad-Lebenszyklus jeder Tabbar-Seite eine Warteschneeflocke auftauchen lassen (Hallo Uni-App verwendet diese Methode). löst das onShow jeder Seite aus und löst das onLoad nicht erneut aus.
Die obere Tableiste wird derzeit nur vom WeChat-Applet unterstützt. Wenn ja, wird empfohlen, nicht die obere Einstellung der Tableiste zu verwenden, sondern die Top-Tab selbst. Sie können auf hello uni-app->Template->Top tab verweisen.
Zweitens, konfigurieren Sie es in der page.js-Datei
{ "pages": [ //pages数组中第一项表示应用启动页, { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ,{ "path" : "pages/show/show", "style" : { "navigationBarTitleText": "show" } } ,{ "path" : "pages/component/component", "style" : { "navigationBarTitleText": "component" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { "color": "#F0AD4E", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#F8F8F8", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "首页" },{ "pagePath": "pages/component/component", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "组件" }, { "pagePath": "pages/show/show", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "展示" }] } }Wird nicht angezeigt, wenn ich zwei Seiten in der „tabBar“ konfiguriert habe. Ich weiß nicht, ob dieses Problem aufgetreten ist. Die Konfiguration ist wie folgt
PHP-Programmierung
(Video)Das obige ist der detaillierte Inhalt vonSo zeigen Sie die Tableiste in Uniapp an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!