आयनिक फ्रेमवर्क में टैब्ड पेजों के बीच संक्रमण कैसे करें

Question

आयनिक फ्रेमवर्क के भीतर, आप टैब सेट कर सकते हैं। टैब के भीतर वाले पृष्ठ "स्लाइड-बाएं-दाएं" या किसी अन्य प्रकार के संक्रमण का उपयोग करके आसानी से संक्रमण कर सकते हैं। यह एप्लिकेशन को चिकनी और विचार-विमर्श महसूस करता है।

मेरे पास यह मुद्दा है कि टैब टैब से क्लिक किए जाने वाले प्रत्येक टैब से जुड़े पृष्ठ, बिल्कुल संक्रमण नहीं करते हैं, केवल "बूम" होता है: एक पृष्ठ।

मुझे कोडपेन (link to codepen demo) पर एक पेन मिला जो इस प्रभाव को दोहराने के लिए दोहरा सकता है, लेकिन मैं इसे किसी भी परिदृश्य में दोहराना नहीं कर सकता, Ionic rc0 (1.0) संस्करण बहुत कम है।

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

कृपया सहायता:

codepen कोड एक एनीमेशन कहीं और काम नहीं करने के लिए लगता है कि उपयोग करता है।

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

प्रत्येक राज्य के लिए और फिर प्रत्येक टैब में ion-nav-view पर नाम विशेषता के रूप में

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> 

सूचना नाम "टैब व्यू"।

Answer 2

इससे मुझे समाधान https://github.com/driftyco/ionic/issues/2997 समाधान खोजने में मदद मिली। यह चाल सभी टैब को एकल दृश्य में लोड करना है। आप आयन-टैब के निर्देश का उपयोग नहीं कर सकते हैं कि प्राप्त करने के लिए, आप आप नियमित रूप से एचटीएमएल का उपयोग कर अपने टैब कंटेनर बनाने के लिए करना होगा:

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