Как делать переходы между страницами с вкладками в Ionic Framework

в Ionic Framework можно настроить вкладки. Страницы внутри вкладок могут легко переходить, используя "слайд-влево-вправо" или какой-либо другой тип перехода. Это делает приложение чувствовать себя гладкой и продуманной.

проблема в том, что страницы, связанные с каждой вкладкой, после нажатия из меню вкладки, вообще не переходят, есть только "бум": страница.

Я нашел ручку на codepen (ссылка на демо codepen) что могут повторить этот эффект, как я хочу (в некоторой степени), но я не могу воспроизвести его в любом сценарии, а тем более в ионной версии rc0 (1.0).

код codepen использует анимацию, которая, кажется, не работает в другом месте:

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

просьба помочь.

6
css html ionic ionic-framework javascript

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"
    }
  }
})

вкладки.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" для каждого состояния и снова в качестве атрибута name на 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');
}})

и, наконец, routs:

$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'
  }
}})
2