วิธีซ่อนแท็บในอิออน

บทความนี้แชร์แท็บการซ่อนไอออนิกสำหรับคุณสำหรับการอ้างอิงของคุณกับคุณ เนื้อหาเฉพาะมีดังนี้

1.

 <ion-tabs ng-class = "{'tabs-item-hide': $ root.hidetabs}"> <!-แท็บ-> </ion-tabs>

2.

เพิ่ม. directive ลงในคอนโทรลเลอร์นี้:

 var module = angular.module ('app.directives', []); module.directive ('showtabs', ฟังก์ชั่น ($ rootscope) {return {จำกัด : 'a', link: function ($ scope, $ el) {$ rootscope.hidetabs = false; จำกัด : 'A', Link: Function ($ scope, $ el) {$ rootscope.hidetabs = true;}};})

3.

hide-tabs อ้างอิงในหน้า html

 <ion-view hide-tabs> <!-ดูเนื้อหา-> </ion-tabs>

4.

เมื่อหน้ากลับไปที่หน้าหลักต้องแสดงแท็บอีกครั้งและคุณต้องเพิ่มลงในคอนโทรลเลอร์ (ส่วนใหญ่เพื่อแก้ปัญหาของแท็บหรือซ่อนอยู่บน Android):

 $ scope. $ on ('$ ionicView.enter', function () {// แสดงแท็บ $ rootscope.hidetabs = false;});

5.

ฉันใช้แท็บด้านบนและปัญหาอื่นที่ฉันพบคือ: ส่วนหนึ่งของเนื้อหาของ <ion-content> จะถูกซ่อนไว้; สารละลาย:

แก้ไขเนื้อหาใน Directive.js อีกครั้งและไม่ใช้ showtabs อีกต่อไป:

 .directive ('hidetabs', ฟังก์ชั่น ($ rootscope) {return {จำกัด : 'a', link: function (ขอบเขต, องค์ประกอบ, คุณลักษณะ) {ขอบเขต. $ on ('$ ionicview.beforenter', function (); ขอบเขต. $ on ('$ ionicview.beforeleave', function () {$ rootscope.hidetabs = false;});}};})

มาสรุปกันเถอะ เมื่อเทียบกับการใช้แท็บหากอยู่ที่ด้านล่างแท่นข้างต้นจะไม่มีปัญหาใหญ่ แต่ถ้ามันถูกใช้อยู่ด้านบนมันจะพบปัญหาบางอย่างเมื่อพูดถึงเนื้อหา

ในความเป็นจริงคุณสามารถพิจารณาใช้ <ion-slide> บนไอออนิกแทน <ion-tabs> ไม่ว่าจะเป็นเอฟเฟกต์การเลื่อนกับหน้าอื่น ๆ หรือเอฟเฟกต์การเลื่อนของหน้าสไลด์มันจะได้รับการปรับปรุงอย่างมากโดยเฉพาะอย่างยิ่งใน Android

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น