ionic隱藏tabs的方法
更新時間：2016年08月29日 09:49:31 投稿：lijiao
這篇文章主要為大家詳細介紹了ionic隱藏tabs的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文為大家分享了ionic隱藏tabs的方法，供大家參考，具體內(nèi)容如下
1.
<ion-tabs ng-class="{'tabs-item-hide': $root.hideTabs}">
<!-- tabs -->
</ion-tabs>
2.
在該控制器下加上.directive：
var module = angular.module('app.directives', []);
module.directive('showTabs', function ($rootScope) {
return {
restrict: 'A',
link: function ($scope, $el) {
$rootScope.hideTabs = false;
}
};
}).directive('hideTabs', function ($rootScope) {
return {
restrict: 'A',
link: function ($scope, $el) {
$rootScope.hideTabs = true;
}
};
})
3.
在html頁面中引用hide-tabs
<ion-view title="New Entry Form" hide-tabs> <!-- view content --> </ion-tabs>
4.
當頁面返回主頁面時，需要再次顯示tabs，則需要在該控制器中加上(主要是解決android上tabs還是隱藏的問題)：
$scope.$on('$ionicView.enter', function () {
// 顯示 tabs
$rootScope.hideTabs = false;
});
5.
我用的是tabs-top，還遇到的一個問題是：<ion-content>的一部分內(nèi)容會被隱藏；解決辦法：
再次修改directive.js里邊的內(nèi)容，不再使用showTabs：
.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 = value;
});
});
scope.$on('$ionicView.beforeLeave', function () {
$rootScope.hideTabs = false;
});
}
};
})
來個總結(jié)吧，相對于tabs用法，如果是在底部的話，上邊的那些不會有什么太大的問題。但如果是用在頂部的話，涉及到content，會遇到一點問題。
其實可以考慮使用ionic上的<ion-slide>來代替<ion-tabs>,不管是與其它頁面的滑動效果，還是slide頁面的滑動效果都會很大的提升，特別是在android上。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
兩個值相加精確指定位數(shù)在alert出來，下面有個不錯的示例，感興趣的朋友可以參考下2013-09-09
利用CSS、JavaScript及Ajax實現(xiàn)圖片預加載的三大方法
本文主要介紹了利用CSS、JavaScript及Ajax實現(xiàn)圖片預加載的三大方法。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
addEventListener()與removeEventListener()解析
這篇文章主要為大家詳細介紹了addEventListener()與removeEventListener()，用于處理指定和刪除事件處理程序操作，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
淺談Javascript中substr和substring的區(qū)別
這篇文章主要介紹了Javascript中substr和substring的區(qū)別，非常的簡單明了，有需要的小伙伴可以來仔細看看。2015-09-09
深入認識JavaScript中的函數(shù)...2007-01-01
本篇文章主要介紹了原生JS實現(xiàn)日歷組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了javascript簡單鏈式調(diào)用,結(jié)合具體實例形式模擬jQuery分析了鏈式調(diào)用的原理與具體實現(xiàn)技巧,需要的朋友可以參考下2017-05-05
JavaScript?中的?parseInt()?函數(shù)詳解
parseInt函數(shù)將其第一個參數(shù)轉(zhuǎn)換為一個字符串，對該字符串進行解析，然后返回一個整數(shù)或?NaN，這篇文章主要介紹了JavaScript?的?parseInt()?函數(shù),需要的朋友可以參考下2023-05-05
JS實現(xiàn)網(wǎng)頁游戲中滑塊響應鼠標點擊移動效果
這篇文章主要介紹了JS實現(xiàn)網(wǎng)頁游戲中滑塊響應鼠標點擊移動效果,涉及JavaScript針對頁面鼠標事件、滾動事件及元素屬性等相關操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了CKeditor富文本編輯器使用技巧之添加自定義插件的方法,結(jié)合實例形式分析了CKeditor添加自定義插件的步驟與相關操作技巧,需要的朋友可以參考下2019-06-06