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