ionic中隐藏tabs(tabs-item-hide)(首页显示tab,其他页面不显示)

本文介绍如何在Ionic应用中实现首页显示tabs,而在其他页面隐藏tabs。通过修改tabs页面和视图的代码,以及调整hideTabs指令,达到在不同页面控制tabs显示与隐藏的效果。

我之前看到之前的同志用指令.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 = '';


}
}
})

这样就可以达到目的了,有什么问题可以评价追问
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值