美文网首页
Ionic1 指定页面隐藏Tabs

Ionic1 指定页面隐藏Tabs

作者: remainer | 来源:发表于2018-01-19 17:42 被阅读0次
<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}">

    <ion-tab title="首页" icon-off="ion-home" icon-on="ion-home" href="#/tab/dash">
        <ion-nav-view name="dash"></ion-nav-view>
    </ion-tab>
    <ion-tab title="我的" icon-off="ion-person" icon-on="ion-person" href="#/tab/account">
        <ion-nav-view name="account"></ion-nav-view>
    </ion-tab>

</ion-tabs>

html中的重点是ng-class属性,指定$rootScope.hideTabs为true时隐藏Tabs.

.run(function ($rootScope) {
    // 页面跳转事件拦截 $stateChangeStart | $stateChangeSuccess | $stateChangeError
    // https://github.com/angular-ui/ui-router/wiki
    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
        if(toState.url == "/dash" || toState.url == "/account"){ // 这两个页面不隐藏Tabs
            $rootScope.hideTabs = false;
        } else { // 其他页面英藏Tabs
            $rootScope.hideTabs = true;
        }
    });
})

类似于拦截器的实现可以在这里统一指定哪些页面不显示Tabs。

相关文章

网友评论

      本文标题:Ionic1 指定页面隐藏Tabs

      本文链接:https://www.haomeiwen.com/subject/yxkaoxtx.html