ionic隱藏tabs的方法
更新時(shí)間：2016年08月29日 09:49:31 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了ionic隱藏tabs的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文為大家分享了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頁(yè)面中引用hide-tabs
<ion-view title="New Entry Form" hide-tabs> <!-- view content --> </ion-tabs>
4.
當(dāng)頁(yè)面返回主頁(yè)面時(shí)，需要再次顯示tabs，則需要在該控制器中加上(主要是解決android上tabs還是隱藏的問(wèn)題)：
$scope.$on('$ionicView.enter', function () {
// 顯示 tabs
$rootScope.hideTabs = false;
});
5.
我用的是tabs-top，還遇到的一個(gè)問(wèn)題是：<ion-content>的一部分內(nèi)容會(huì)被隱藏；解決辦法：
再次修改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;
});
}
};
})
來(lái)個(gè)總結(jié)吧，相對(duì)于tabs用法，如果是在底部的話，上邊的那些不會(huì)有什么太大的問(wèn)題。但如果是用在頂部的話，涉及到content，會(huì)遇到一點(diǎn)問(wèn)題。
其實(shí)可以考慮使用ionic上的<ion-slide>來(lái)代替<ion-tabs>,不管是與其它頁(yè)面的滑動(dòng)效果，還是slide頁(yè)面的滑動(dòng)效果都會(huì)很大的提升，特別是在android上。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要和大家一起談一談js中的執(zhí)行環(huán)境及作用域，本文依據(jù)面試過(guò)程中遇到的問(wèn)題進(jìn)行探討，感興趣的小伙伴們可以參考一下2016-03-03
利用offsetParent屬性在Dom層次中逐級(jí)向上回溯，將每個(gè)層次偏移量合計(jì),需要的朋友可以參考下2014-09-09
Array定義與sort方法在使用過(guò)程中還是比較常見(jiàn)的，下面為大家介紹下Array的定義及sort方法使用示例2013-08-08
這篇文章主要介紹了微信小程序如何播放騰訊視頻的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要給大家總結(jié)介紹了關(guān)于javascript中的一些奇葩的日期換算方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了JS淺拷貝和深拷貝原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript淺拷貝及深拷貝相關(guān)概念、原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
這篇文章主要介紹了webpack該如何打包及打包流程,本文通過(guò)圖文示例相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了cropperjs實(shí)現(xiàn)裁剪圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
JsDom編程小結(jié)，需要進(jìn)行dom操作的朋友可以參考下。2011-08-08
JS實(shí)現(xiàn)網(wǎng)頁(yè)Div層Clone拖拽效果
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)Div層Clone拖拽效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素位置屬性及層級(jí)屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09