如何在 Ionic Framework 中进行选项卡式页面之间的转换

Question

在 Ionic Framework 中，您可以设置选项卡。选项卡内的页面可以使用 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'
  }
}})

如何在 Ionic Framework 中进行选项卡式页面之间的转换

How to Do Transitions Between Tabbed Pages in Ionic Framework

html

javascript

css

ionic-framework