tab模式下的Navigation的问题
发布于 2年前 作者 fukai7722 1830 次浏览 来自 问答

目前需求:在tabs的模式下,想要新打开一个新页面detail(不带底部tab),并可以返回 目前问题:如果在app.js中定义的state为 tab.detail,则底部还会有tab,如果脱离tab则没有返回按钮

请问是否有两全的办法: 代码如下:

.state('tab.detail', {
    url: '/detail/:id',
     views: {
         'tab-hot': {
          templateUrl: 'templates/detail.html',
         controller: 'DetailCtrl'
         }
     }
})

 .state('detail', {
     url: '/detail/:id',
     templateUrl: 'templates/detail.html',
     controller: 'DetailCtrl'
  });
7 回复

你可以采用都带tab的,然后在不需要tab的页面把tab隐藏就行了

昨天刚好也碰到这个问题,咨询了朋友之后解决了,解决方案: 增加一个指令

.directive('hideTabs',function($rootScope){
    return {
        restrict:'AE',
        link:function($scope){
            $rootScope.hideTabs = 'tabs-item-hide';
            $scope.$on('$destroy',function(){
                $rootScope.hideTabs = ' ';
            })
        }
    }
};

然后再tabs 处增加class

<ion-tabs class="tabs-icon-top tabs-stable tabs-color-positive {{hideTabs}}" >
……
</ion-tabs>

体验不是特别棒,动画效果不好,不过勉强可以解决了

@DongHongfei 我把$rootScope.hideTabs值的变更放在$ionicView.beforeLeave和$ionicView.loaded事件里面,没发现动画效果不佳

@zhanyz 我刚刚像你说的这样试了下:

    $scope.$on('$ionicView.beforeLeave', function() {
      $rootScope.hideTabs = '  ';
    });

    $scope.$on('$ionicView.loaded', function() {
      $rootScope.hideTabs = 'tabs-item-hide';
    });

一样可以实现,效果差不多。 我说的动画效果是指类似 微信 那样, 聊天详情页弹出和侧滑时整体遮盖 tab 标签页的效果~

@DongHongfei 这个就没办法啦,好像anguar有类似的css,但我只在model view中试过成功,正常的nav-view出不来

回到顶部