導入
Ion-TabsはIonicのTABコンポーネントであり、ルーティングはAngular-UI-Router.jsを使用します。したがって、最初にuirouteをマスターする必要があります。
複製図
例コード
index.html
<body ng-app = "starter"> <！ - ion-nav-viewはテンプレートをレンダリングするために使用されます - > <ion-nav-view> </ion-nav-view> </body>
tab-index.html
<ion-tabs> <！ - href：タブアイコンに対応するステータス：Ion-Tab Non-Highlightアイコンアイコンオフ：Ion-Tabハイライトアイコン - > <Ion-Tab href = "＃/tabs/home" Icon-on = "ion-new-home-off" icon-off = "" ion-new-home ">名前属性。ルートを策定する場合、対応するステータスとレンダリングビュー - > <ion-nav-view name = "tab-home"> </ion-nav-view> </ion-tab> <ion-tab href = "＃/tabs/taobao" icon-off = "yon-new-tf" icon-on = 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 = "＃/tabs/use =" Icon-new-user ""> user <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：{"tabtaobao"：{templates/taobao/taobao.html "}}}}）。 TemplateUrl： "Templates/user/user.html"}}}）次に、home.html taobao.html user.htmlの下に各タブのコンテンツを書くことができます
例えば：
home.html
<Ion-Header-Bar> <Ion-Title> home </ion-title> </ion-header-bar> <ion-view> <ion-view> <ion-refresher pulling-text = "ドロップダウンリフレッシュ" on-refresh = "dorefresh（）"> </ion-refresher> </ion-content> </ion-content> </ion-view>
注：イオン-TABをイオン含有要素に入れないでください。特定の既知のCSSエラーを引き起こします。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。