يقدم
Ion-Tabs هو مكون علامة تبويب في الأيوني ، ويستخدم التوجيه 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 href = "#/tabs/home" icon-on on = "ion-new-home-off" icon-off = "ion-new-fil". إلى سمة الاسم. وعند صياغة المسارات ، والحالة المقابلة ووجهات النظر المقابلة-> <ion-nav-view name = "tab-home"> </ion-nav-view> </os-tab> <ion-tab href = "#/tabs/taobao" icon-off = "ion-new-tf" icon-on = "ion-new-off"> 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/user" icon-ice-ice-ice-new-user " icon-on = "ion-new-user-Off"> <ion-nav-view name = "tab-user"> </ion-nav-view> </ition-tab> </on-tabs>
config.js
.state ("علامات التبويب" ، {url: "/tabs" ، templateurl: "templates/tab/tab-index.html" ، وحدة التحكم: }) "قوالب/مستخدم/user.html"}}})ثم يمكنك كتابة محتويات كل علامة تبويب أسفل home.html taobao.html user.html
على سبيل المثال:
home.html
<ion-header-bar> <Iion-title> home </on-title> </on ion-header-bar> <ion-view> <ion-content> <ion-refresher pulling-text = "drop-down" on-refresh = "dorefresh ()
ملحوظة: لا تضع تربع أيون في عنصر محتوى أيون ؛ سوف يسبب بعض أخطاء CSS معروفة.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.