einführen
Ion-tabs ist eine TAB-Komponente in Ionic, und das Routing verwendet Angular-UI-Router.js. Deshalb müssen Sie zuerst Uiroute beherrschen.
Reproduktionsdiagramm
Beispielcode
index.html
<Body ng-App = "Starter"> <!-Ion-Nav-View wird verwendet, um Vorlagen zu rendern-> <Ion-nav-view> </Ion-nav-view> </body>
tab-Index.html
<ion-tabs> <!-href: Der Status, der dem Registerkarten-Symbol entspricht: Ion-tab-Ion-Highlight-Ikon-Icon-Off: Ion-Tab-Highlight-Symbol-> <ion-tab href = "#/tabs/home" icon-on = "Ion-New-Home-off" icon-off = "ion-home" -In-home "> <!-Es gibt zu. Das Namensattribut. Und bei der Formulierung von Routen, dem entsprechenden Status und den Rendering-Ansichten-> <ion-nav-view name = "tab-home"> </ion-nav-view> </ion-tab> <Ion-tab href = "#/taBaoo" icon-off = "ion-nav-nav-na-view" ion-na-nav-view "icon-on =" ion-new " name = "tab-taobao"> </ion-nav-view> </ion-tab> <ion-tab icon-off = "ion-new-zhemai" icon-on = "ion-new-zhemai-off"> </ion-tab> <ion-tab href = "#/ub User" icon-off = "iion-orn" -ION-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW-NEW- <ion-nav-view name = "tab-user"> </ion-nav-view> </ion-tab> </ion-tabs>
config.js
.State ("tabs", {url: "/tabs", templateurl: "templates/tab/tab-Index.html", Controller: "tabs"}). }}).state("tabs.taobao", { url: "/taobao", views : { "tab-taobao" : { templateUrl : "templates/taobao/taobao.html" } }}).state("tabs.user", { url: "/user", views : { "tab-user" : { templateUrl: "templates/user/user.html"}}})Dann können Sie den Inhalt jeder Registerkarte unter home.html taobao.html user.html schreiben
Zum Beispiel:
home.html
<Ion-Header-Bar> <Ion-Title> Home </Ion-Title> </Ion-Header-Bar> <Ion-Views> <Ion-Content> <Ion-refresher Pulling-text = "Dropdown-Refresh" On-Refresh = "Dorefresh ()"> </ion-refesher> </ion </ion-content> </ion -refesher;
HINWEIS: Stellen Sie Ionen-Tabs nicht in ein Ionen-In-Intensiva-Element; Es wird bestimmte bekannte CSS -Fehler verursachen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.