首页 文章

如何在离子框架中的选项卡页面之间进行转换

提问于
浏览 次
6

在Ionic Framework中，您可以设置选项卡 . 选项卡中的页面可以使用“向左滑动”或其他类型的过渡轻松转换 . 这使应用程序感觉流畅和深思熟虑 .

我遇到的问题是，从标签菜单中点击后，与每个标签相关联的页面根本不会过渡，只有“繁荣”：页面 .

我在codepen (link to codepen demo)上找到了一支笔，它可以按照我想要的方式复制这种效果（在某种程度上），但我不能在任何情况下复制它，更不用说Ionic rc0（1.0）版本了 .

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

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

请协助 .

javascript html css ionic-framework ionic

2 回答

  • 2

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

    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 的名称属性 .

    回复于
  • 1

    这有助于我找到解决方案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'
  }
}})
    回复于

相关问题