ionic進入多級目錄后隱藏底部導航欄(tabs)的完美解決方案
更新時間：2016年11月23日 11:46:12 作者：ARKHAM
這篇文章主要介紹了ionic進入多級目錄后隱藏底部導航欄(tabs)的完美解決方案,在文章中用到了angularjs的指令知識點，對ionic隱藏底部導航欄知識感興趣的朋友一起學習吧
在有tabs的項目里，進入子層級時，底部導航還一直存在，本人是要讓他只在首頁幾個界面存在，其他的隱藏，在這里用到了angularjs的指令，要完成這個步驟分為三步：
在標簽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;
})
});
}
};
});
在想要隱藏的界面標簽 ion-view添加表達式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進入多級目錄后隱藏底部導航欄(tabs)的完美解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
可以自定義廣告的圖片、鏈接、長、寬等。光標移到圖片上會出現(xiàn)左右箭頭，感興趣的朋友可以嘗試測試下2013-10-10
Set是一種叫做集合的數(shù)據(jù)結構(結構和Array很像),Map是一種叫做字典的數(shù)據(jù)結構,這篇文章主要為大家詳細介紹了JavaScript中Map與Set用法與區(qū)別,需要的小伙伴可以參考下2023-11-11
作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域示例詳解的介紹，非常不錯，感興趣的朋友一起看下吧2016-07-07
elementui的select實現(xiàn)多選添加功能
這篇文章主要介紹了elementui的select實現(xiàn)多選添加功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
bootstrap模態(tài)框彈出和隱藏,動態(tài)改變中間內(nèi)容的實例
今天小編就為大家分享一篇bootstrap模態(tài)框彈出和隱藏,動態(tài)改變中間內(nèi)容的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了js事件監(jiān)聽器用法,以實例形式較為詳細的分析了javascript事件監(jiān)聽器使用注意事項與相關技巧,需要的朋友可以參考下2015-06-06
微信小程序前端通過weixin://wxpay/bizpayurl生成支付二維碼全過程
這篇文章主要給大家介紹了關于微信小程序前端通過weixin://wxpay/bizpayurl生成支付二維碼的相關資料,weixin://wxpay/bizpayurl 是一個微信支付的鏈接地址,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
使用JavaScript實現(xiàn)網(wǎng)頁版Pongo設計思路及源代碼分享
Pongo是款很好玩的手欠類游戲，由于在玩的過程中發(fā)現(xiàn)了一些BUG，所以就打算自己也弄個，經(jīng)過一番思索，就有了本文，主要說說實現(xiàn)這款游戲的設計思路以及分享源碼給大家2014-06-06
想必大家對base64并不陌生吧，在本文將為大家介紹下Js中的base64加密解密過程，感興趣的朋友不要錯過2013-10-10
這篇文章主要介紹了基于Phantomjs生成PDF的實現(xiàn)方法,結合實例形式分析了Phantomjs結合nodejs生成pdf的操作步驟與相關技巧,需要的朋友可以參考下2016-11-11