บทความนี้แชร์แท็บการซ่อนไอออนิกสำหรับคุณสำหรับการอ้างอิงของคุณกับคุณ เนื้อหาเฉพาะมีดังนี้
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 มากขึ้น