แนะนำ
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-nav-view name = "tab-home"> </ion-nav-view> </ion-tab> <ion-tab href = "#/tabs/taobao" icon-off = "ion-new-new-tf" ion-on = " name = "tab-taobao"> </ion-nav-view> </ion-tab> <ไอออนไอออนไอออน-ปิด = "ไอออน-นิว-ไซมาย" ไอคอน-on = "ไอออน-นิว-zhemai-off"> </ion-tab> <ion-tab href = "#/tabs icon-on = "ion-new-user-off"> <ion-nav-view name = "Tab-user"> </ion-nav-view> </ion-tab> </ion-tabs>
config.js
.state ("แท็บ", {url: "/แท็บ", templateurl: "เทมเพลต/แท็บ/แท็บ-index.html", คอนโทรลเลอร์: "แท็บ"}). state ("tabs.home", {url: "home" }}). state ("tabs.taobao", {url: "/taobao", มุมมอง: {"tab-taobao": {templateurl: "เทมเพลต/taobao/taobao.html"}}}) "เทมเพลต/user/user.html"}}})จากนั้นคุณสามารถเขียนเนื้อหาของแต่ละแท็บภายใต้ home.html taobao.html user.html
ตัวอย่างเช่น:
home.html
<ion-header-bar> <cole-title> บ้าน </ion-title> </ion-header-bar> <ion-view> <ion-content> <ion-refresher pulling-text = "Drop-Down Refresh" on-refresh = "Dorefresh ()
หมายเหตุ: อย่าวางไอออน-แท็บลงในองค์ประกอบเนื้อหาไอออน มันจะทำให้เกิดข้อผิดพลาด CSS ที่รู้จัก
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น