如何在 Ionic 框架中的标签页之间进行转换

Question

在 Ionic 框架中，您可以设置选项卡。选项卡中的页面可以使用slide-left-right 或其他类型的转换轻松转换。这使应用程序感觉流畅且经过深思熟虑。

我遇到的问题是，与每个选项卡相关联的页面，一旦从选项卡菜单中单击，就根本不会转换，只有 boom: 一个页面。

我在 codepen (link to codepen demo) 上找到了一支笔，可以根据需要（在某种程度上）复制这种效果，但我无法在任何情况下复制它，更不用说 Ionic rc0 (1.0) 版本了。

codepen 代码使用的动画似乎在其他地方不起作用：

<ion-nav-view animation="slide-left-right"></ion-nav-view>

请帮忙。

Answer 1

我还没有尝试让这个确切的示例正常工作，但我通过为所有选项卡赋予相同的视图名称，在我的一个应用程序中实现了类似的效果：

app.js

$stateProvider
.state('signin', {
  url: "/sign-in",
  templateUrl: "sign-in.html",
  controller: 'SignInCtrl'
})
.state('forgotpassword', {
  url: "/forgot-password",
  templateUrl: "forgot-password.html"
})
.state('tabs', {
  url: "/tab",
  abstract: true,
  templateUrl: "tabs.html"
})
.state('tabs.home', {
  url: "/home",
  views: {
    'tab-view': {
      templateUrl: "home.html",
      controller: 'HomeTabCtrl'
    }
  }
})
.state('tabs.facts', {
  url: "/facts",
  views: {
    'tab-view': {
      templateUrl: "facts.html"
    }
  }
})
.state('tabs.facts2', {
  url: "/facts2",
  views: {
    'tab-view': {
      templateUrl: "facts2.html"
    }
  }
})
.state('tabs.about', {
  url: "/about",
  views: {
    'tab-view': {
      templateUrl: "about.html"
    }
  }
})

tabs.html

<ion-tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animation="slide-left-right">

    <ion-tab title="Home" icon="ion-home" href="#/tab/home">
      <ion-nav-view name="tab-view"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
      <ion-nav-view name="tab-view"></ion-nav-view>
    </ion-tab>

  </ion-tabs>

注意每个状态的名称“tab-view”，并再次作为每个选项卡中ion-nav-view 上的名称属性。

Answer 2

这帮助我找到了解决方案 https://github.com/driftyco/ionic/issues/2997 。诀窍是在单个视图中加载所有选项卡。您不能使用 ion-tabs 指令来实现这一点，您必须使用常规 html 创建标签容器：

<ion-view title="Tabs Controller">
<!-- All tabs are going to load here -->
<ion-nav-view name="menuContent"></ion-nav-view>

<!-- TABS -->
<div class="tabs-stable tabs-icon-top tabs-bottom tabs-standard">
    <div class="tab-nav tabs">
        <a class="tab-item" ng-click="goTabForums()" ng-class="{ active : settings.isTab1}">
            <i class="icon bb-ios-forums"></i>
            <span translate="TABS.FORUMS_TAB"></span>
        </a>
        <a class="tab-item" ng-click="goTabGroups()" ng-class="{ active : settings.isTab2 }">
            <i class="icon bb-ios-forums"></i>
            <span translate="TABS.GROUPS_TAB"></span>
        </a>
        <a class="tab-item" ng-click="goTabTopics()" ng-class="{ active : settings.isTab2 }">
            <i class="icon bb-ios-topics"></i>
            <span translate="TABS.TOPICS_TAB"></span>
        </a>
        <a class="tab-item" ng-click="goTabNotifications()" ng-class="{ active : settings.isTab2 }">
            <i class="icon bb-ios-notifications"></i>
            <span translate="TABS.NOTIFICATIONS_TAB"></span>
        </a>
        <a class="tab-item" ng-click="goTabProfile()" ng-class="{ active : settings.isTab2 }">
            <i class="icon bb-ios-my-profile"></i>
            <span translate="TABS.MY_PROFILE_TAB"></span>
        </a>
        <a class="tab-item" ng-click="goTabMore()" ng-class="{ active : settings.isTab2 }">
            <i class="icon bb-ios-more"></i>
            <span translate="TABS.MORE_TAB"></span>
        </a>
    </div>
</div>

您的标签控制器应如下所示：

.controller('tabsCtrl', function($scope, $ionicConfig, $state) {

$scope.goTabForums = function(){
    $ionicConfig.views.transition('platform');
    $state.go('tabsController.forums');
}
$scope.goTabGroups = function(){
    $ionicConfig.views.transition('platform');
    $state.go('tabsController.groups');
}
$scope.goTabTopics = function(){
    $ionicConfig.views.transition('platform');
    $state.go('tabsController.topics');
}
$scope.goTabNotifications = function(){
    $ionicConfig.views.transition('platform');
    $state.go('tabsController.notifications');
}
$scope.goTabProfile = function(){
    $ionicConfig.views.transition('platform');
    $state.go('tabsController.profile');
}
$scope.goTabMore = function(){
    $ionicConfig.views.transition('platform');
    $state.go('tabsController.more');
}})

最后是溃败：

$stateProvider
.state('tabsController.forums', {
url: '/forums',
views: {
  'menuContent': {
    templateUrl: 'templates/forums.html',
    controller: 'forumsCtrl'
  }
}})
.state('tabsController.topics', {
url: '/topics',
views: {
  'menuContent': {
    templateUrl: 'templates/topics.html',
    controller: 'topicsCtrl'
  }
}})