网上有很多关于隐藏ion-tabs的博文,大致的方法都是通过添加angularjs指令。
但是都没有提到解决隐藏时的延迟问题。
下面先介绍下如何隐藏
- 在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下:
<code class="hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>ion<span class="hljs-attribute" style="box-sizing: border-box;">-tabs</span> class<span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tabs-icon-top"</span> ng<span class="hljs-attribute" style="box-sizing: border-box;">-class</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">=</span><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"{'tabs-item-hide': $root.hideTabs}"</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//tabs</span> <span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;"><</span>/ion<span class="hljs-attribute" style="box-sizing: border-box;">-tabs</span><span class="hljs-subst" style="color: rgb(0, 0, 0); box-sizing: border-box;">></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
2.添加angularjs的指令,源码如下:
<code class="hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//app已经在其他文件中指定,如var app = angular.module("starter",["ionic"])</span> app.directive(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'hideTabs'</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(<span class="hljs-variable" style="box-sizing: border-box;">$rootScope</span>)</span> {</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> { restrict: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'A'</span>, link: <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(scope, element, attributes)</span> {</span> scope.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$on</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$ionicView.beforeEnter'</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> scope.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$watch</span>(attributes.hideTabs, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(value)</span>{</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$rootScope</span>.hideTabs = value; }); }); scope.<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$on</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'$ionicView.beforeLeave'</span>, <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span> {</span> <span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$rootScope</span>.hideTabs = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>; }); } }; });</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li></ul>
3.三你想要隐藏的界面标签 ion-view添加表达式hide-tabs=”true”,源码如下:
<code class="hljs handlebars has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;">//这是官网模板中的文件 <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">hide-tabs</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true" <span class="xml" style="font-size:undefined; color: inherit; line-height: 1.45; box-sizing: border-box; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">view-title</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"</span></span></span><span class="hljs-expression" style="font-size:undefined; color: inherit; line-height: 1.45; box-sizing: border-box; background-color: transparent;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">chat.name</span>}}</span><span class="xml" style="font-size:undefined; color: inherit; line-height: 1.45; box-sizing: border-box; background-color: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"</span>></span></span> </span></span></span><span class="xml" style="box-sizing: border-box;"> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">class</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"padding"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">img</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">ng-src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"</span></span></span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">chat.face</span>}}</span><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">style</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"width: 64px; height: 64px"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span> </span><span class="hljs-expression" style="box-sizing: border-box;">{{<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">chat.lastText</span>}}</span><span class="xml" style="box-sizing: border-box;"> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-content</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ion-view</span>></span></span></code>以上3步就可以实现隐藏tabs了,但还是会发现tabs成功隐藏了,然而 ion-content并没有真正的满屏。
通过审核元素会发现在ion-content的class 中还有个has-tabs,只要删除has-tabs就没问题了。
其实要解决这个问题很简单。只要在隐藏tabs的时候 将$scope.$hasTabs属性设置为false(此处重点,前面都是废话。。。)
$scope.$hasTabs = false;