이 기사에서는 참조를위한 이온 숨기기 탭 방법을 공유합니다. 특정 내용은 다음과 같습니다
1.
<iOn-tabs ng-class = "{ 'tabs-item-hide': $ root.hidetabs}"> <!-탭-> </ion-tabs>2.
.
var module = angular.module ( 'app.directives', []); module.directive ( 'showtabs', function ($ rootscope) {return {restrict : 'a', link : function ($ scope, $ el) {$ rootscope.hidetabs = false;}};}). 제한 : 'a', link : function ($ scope, $ el) {$ rootscope.hidetabs = true};3.
HTML 페이지의 숨은 탭 참조
<iion-view hide-tabs> <!-컨텐츠보기-> </ion-tabs>
4.
페이지가 메인 페이지로 돌아 오면 탭을 다시 표시해야하며 컨트롤러에 추가해야합니다 (주로 탭의 문제를 해결하거나 Android에서 숨겨진).
$ scope. $ on ( '$ ionicview.enter', function () {// show tabs $ rootscope.hidetabs = false;});5.
탭 탑을 사용하고 있으며, 내가 직면 한 또 다른 문제는 다음과 같습니다. 해결책:
Directive.js에서 컨텐츠를 다시 수정하고 더 이상 showtabs를 사용하지 않습니다.
.Directive ( 'hidetabs', function ($ rootscope) {return {return {restrict : 'a', link : function (scope, element, 속성) {scope. $ on ( '$ itionicview.beforenter', function () {scope. $ watch (attributes.hidetabs, function) {value.hidetabs =); SCOPE. $ ON ( '$ itionicview.beforeleave', function () {$ rootscope.hidetabs = false;});요약합시다. 탭의 사용과 비교하여 탭이 바닥에있는 경우 위의 문제는 큰 문제가 없습니다. 그러나 상단에 사용되면 콘텐츠와 관련하여 문제가 발생합니다.
실제로 <ION-TABS> 대신 IONIC에서 <ION-SLIDE>를 사용하는 것을 고려할 수 있습니다. 다른 페이지의 슬라이딩 효과이든 슬라이드 페이지의 슬라이딩 효과이든, 특히 Android에서 크게 향상됩니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.