如何在Ionic Framework中实现选项卡页面之间的转换

How to Do Transitions Between Tabbed Pages in Ionic Framework

本文关键字：之间 转换 选项 实现 Ionic Framework      更新时间：2023-09-26

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

我遇到的问题是，从选项卡菜单中单击后，与每个选项卡关联的页面根本不会转换，只有繁荣：一个页面。

我在codepen上找到了一个笔（链接到codepen演示），它可以复制我想要的效果（在某种程度上），但我无法在任何场景中复制它，更不用说Ionic rc0（1.0）版本了。

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

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

请协助。

我还没有尝试让这个确切的例子发挥作用，但我在我的一个应用程序中通过给所有选项卡提供相同的视图名称来实现类似的效果：

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>

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

这帮助我找到了解决方案https://github.com/driftyco/ionic/issues/2997。诀窍是在单个视图中加载所有选项卡。你不能使用离子标签指令来实现这一点，你必须使用常规的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'
  }
}})
相关文章：