introduire
ion-tabs est un composant d'onglet dans ionic, et le routage utilise Angular-ui-Router.js. Par conséquent, vous devez d'abord maîtriser Uiroute.
Diagramme de reproduction
Exemple de code
index.html
<corps ng-app = "starter"> <! - ion-nav-view est utilisé pour rendre des modèles -> <ion-nav-view> </ ion-nav-view> </body>
tab-index.html
<ion-tabs> <! - HREF: Le statut correspondant à l'icône d'onglet: ion-tab non-highlight icon icon-off: ion-tab icon icon -> <ion-tab href = "# / onglets / home" icon-on = "ion-new-home" icon-off = "ion-home"> <! - il y a plusieurs ionavis attribut. Et lors de la formulation de routes, les vues d'état et de rendu correspondants -> <ion-nav-visue name = "tab-home"> </ ion-nav-visue> </ion-tab> <ion-tab href = "# / tabs / taobao" icon-off = "ion-new-tf" icon-on = "ion-new-tf-off"> <ion-nav-view name = "tab-taobao"> </ ion-nav-visue> </ ion-tab> <ion-tab icon-off = "ion-new-zhemai" icon-on = "ion-new-zhemai-off <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", contrôleur: "tabs"}). State ("tabs.home", {url: "/ home", vues: {"tab-home": {templateurl: "templates / home.htm"} }}).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"}}})Ensuite, vous pouvez écrire le contenu de chaque onglet sous Home.html Taobao.html User.html
Par exemple:
home.html
<ion-header-bar> <ion-title> home </ion-title> </ ion-header-bar> <ion-visue> <ion-contend> <ion-re-reresher pulling-text = "drop-down reresh" on-refresh = "dorefresh ()"> </on-rersher> </ion-continent> </ion-View>
Remarque: ne placez pas les tabs d'ions dans un élément de contenu d'ion; Il provoquera certaines erreurs CSS connues.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.