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

来源:互联网 发布:python二分法解方程 编辑:程序博客网 时间:2024/05/21 11:01

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


}
}
})

这样就可以达到目的了,有什么问题可以评价追问
1 0
原创粉丝点击