ionic進(jìn)入多級目錄后隱藏底部導(dǎo)航欄(tabs)的完美解決方案
更新時(shí)間：2016年11月23日 11:46:12 作者：ARKHAM
這篇文章主要介紹了ionic進(jìn)入多級目錄后隱藏底部導(dǎo)航欄(tabs)的完美解決方案,在文章中用到了angularjs的指令知識點(diǎn)，對ionic隱藏底部導(dǎo)航欄知識感興趣的朋友一起學(xué)習(xí)吧
在有tabs的項(xiàng)目里，進(jìn)入子層級時(shí)，底部導(dǎo)航還一直存在，本人是要讓他只在首頁幾個(gè)界面存在，其他的隱藏，在這里用到了angularjs的指令，要完成這個(gè)步驟分為三步：
在標(biāo)簽ion-tabs中添加：ng-class=”{‘tabs-item-hide': $root.hideTabs}”，源碼如下
<ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}">
//tabs
</ion-tabs>
添加angularjs的指令，源碼如下：
//app已經(jīng)在其他文件中指定，如var app = angular.module("starter",["ionic"])
app.directive('hideTabs', function($rootScope) {
return {
restrict: 'A',
link: function(scope, element, attributes) {
scope.$on('$ionicView.beforeEnter', function() {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = 'tabs-item-hide';
});
});
scope.$on('$ionicView.beforeLeave', function() {
scope.$watch(attributes.hideTabs, function(value){
$rootScope.hideTabs = 'tabs-item-hide';
});
scope.$watch('$destroy',function(){
$rootScope.hideTabs = false;
})
});
}
};
});
在想要隱藏的界面標(biāo)簽 ion-view添加表達(dá)式hide-tabs=”true”,源碼如下：
//這是官網(wǎng)模板中的文件
<ion-view hide-tabs="true" view-title="{{chat.name}}">
<ion-content class="padding">
<img ng-src="{{chat.face}}" style="width: 64px; height: 64px">
<p>
{{chat.lastText}}
</p>
</ion-content>
</ion-view>
以上所述是小編給大家介紹的ionic進(jìn)入多級目錄后隱藏底部導(dǎo)航欄(tabs)的完美解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
父元素與子iframe相互獲取變量和元素對象的具體實(shí)現(xiàn)
父元素與子iframe相互獲取變量和元素對象的方法有很多,本文提供了一些不錯的示例另收集網(wǎng)上的一些，可以參考下2013-10-10
表單常見的元素主要包括：文本輸入框、下拉選擇框、單選框、復(fù)選框、文本域、按鈕等。接下來通過本文給大家介紹Bootstrap表單組件教程，感興趣的朋友一起學(xué)習(xí)吧2016-04-04
本文為大家介紹下使用js仿新浪微博登陸郵箱提示效果，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對大家有所幫組2013-08-08
JS前端接口防止重復(fù)請求的三種實(shí)現(xiàn)方案
前段時(shí)間心血來潮,想把項(xiàng)目的前端都做一下接口防止重復(fù)請求的處理,雖然大部分的接口處理我們都是加了loading的,但又不能確保真的是每個(gè)接口都加了的,下面就來總結(jié)一下這次的防重復(fù)請求的實(shí)現(xiàn)方案,需要的朋友可以參考下2024-03-03
JavaScript對象學(xué)習(xí)小結(jié)
JavaScript 中的所有事物都是對象：字符串、數(shù)值、數(shù)組、函數(shù).幾乎用到的每個(gè)js都離不開它的js對象。此外，JavaScript 允許自定義對象，下面跟著小編學(xué)習(xí)javascript對象學(xué)習(xí)小結(jié)，需要的朋友可以參考下2015-09-09
理解JavaScript設(shè)計(jì)模式中的單例模式
這篇文章主要介紹了理解JavaScript設(shè)計(jì)模式中的單例模式，單例模式即Singleton?Pattern是最簡單的設(shè)計(jì)模式之一，下文更多相關(guān)介紹感興趣的小伙伴可以參考一下2022-04-04
淺談javascript的url參數(shù)parse和build函數(shù)
下面小編就為大家?guī)硪黄獪\談javascript的url參數(shù)parse和build函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
javascript驗(yàn)證香港身份證的格式或真實(shí)性
本文分享了利用javascript驗(yàn)證香港身份證的格式或真實(shí)性的代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)鼠標(biāo)按下拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例
這篇文章主要介紹了純JS實(shí)現(xiàn)表單驗(yàn)證實(shí)例,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12