我之前看到之前的同志用指令.directive连接ionic封装了“ 'tabs-item-hide'”这个类(属性),灰常受用,但是在我做项目的时候,用原来的代码,路由去到另外一个页面,tab会弹出来($scope.$on('$destroy',function(){
$rootScope.hideTabs = ' '; }) 这个方法在作怪),但是去掉这个方法后,发现全部页面都已经没有tab了
,实际上我相信绝大部分的APP的首页都是需要tab的,其他页面可以没有,下面是我的解决办法,分享给他家:
一 . 原来代码:
1.tabs页面
<ion-tabs class="tabs-icon-top tabs-positie {{hideTabs}}>
...
</ion-tabs>
2.跳转后页面
<ion-view hide-tabs>
..
</ion-view>
3. 指令
.directive('hideTabs',function($rootScope){
return {
restrict:'AE',
link:function($scope){
$rootScope.hideTabs = 'tabs-item-hide';
$scope.$on('$destroy',function(){
$rootScope.hideTabs = ' ';
})
}
}
}
二.修改后代码:
1.tabs页面
<ion-tabs class="tabs-icon-top tabs-positie {{hideTabs}}{{showTabs}}>
tab1
tab2
.....
</ion-tabs>
2.跳转后页面各种views
//需要隐藏的view
<ion-view hide-tabs>
..
</ion-view>
//需要显示的主页的view
<ion-view show-tabs>
..
</ion-view>
3. 指令
var app = angular.module("uniApp", ["ionic"]);
app.directive('hideTabs',function($rootScope){
return {
restrict:'AE',
link:function($scope){
$rootScope.hideTabs = 'tabs-item-hide';
//删除这里
/*$scope.$on('$destroy',function(){
$rootScope.hideTabs = ' ';
})*/
}
})
//定义显示tab的showTabs指令
.directive("showTabs", function($rootScope) {
return {
restrict: 'AE',
link: function($scope) {
$rootScope.hideTabs = '';
}
}
})
本文介绍如何在Ionic应用中实现首页显示tabs,而在其他页面隐藏tabs。通过修改tabs页面和视图的代码,以及调整hideTabs指令,达到在不同页面控制tabs显示与隐藏的效果。
2185

被折叠的 条评论
为什么被折叠?



