Cách chuyển đổi giữa các trang được gắn thẻ trong khung Ionic

Question

Trong khung Ionic, bạn có thể thiết lập các tab. Các trang trong các tab có thể dễ dàng chuyển đổi bằng cách sử dụng "trượt sang trái" hoặc một số loại chuyển tiếp khác. Điều này làm cho ứng dụng cảm thấy trơn tru và suy nghĩ.

Vấn đề mà tôi có là các trang được liên kết với mỗi tab, sau khi được nhấp từ menu tab, không chuyển tiếp chút nào, chỉ có "bùng nổ": một trang.

Tôi tìm thấy một cây bút trên codepen (link to codepen demo) có thể sao chép hiệu ứng này theo ý muốn của tôi, nhưng tôi không thể sao chép nó trong bất kỳ kịch bản nào, ít hơn phiên bản RC0 (1.0).

Mã codepen sử dụng một hình ảnh động mà dường như không làm việc ở nơi khác:

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

Hãy giúp.

Answer 1

tôi đã không cố gắng để có được rằng ví dụ chính xác làm việc, nhưng tôi đã đạt được một hiệu ứng tương tự ở một trong những ứng dụng của tôi bằng cách cho tất cả các tab tên nhìn giống nhau:

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> 

Thông báo tên "tab-view" cho mỗi tiểu bang và một lần nữa như các thuộc tính tên trên ion-nav-view trong mỗi tab.

Answer 2

Điều này đã giúp tôi tìm giải pháp https://github.com/driftyco/ionic/issues/2997. Bí quyết là tải tất cả các tab trong một chế độ xem. Bạn không thể sử dụng chỉ thị ion-tab để đạt được điều đó, bạn sẽ phải tạo chứa tab của bạn sử dụng html thường xuyên:

<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> 

điều khiển các tab của bạn sẽ trông như thế này:

.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'); 
}}) 

Và cuối cùng là 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' 
    } 
}})