標籤模板之間的離子滑動

我下載了離子標籤模板。我玩了一會兒，想知道如何添加一個可以在選項卡之間導航的滑動功能。在這種情況下，我想用動畫和平滑過渡滑動，而不是突然切換標籤。標籤模板之間的離子滑動

我在離子文檔上看到過。它具有這種幻燈片盒功能。

<ion-slide-box on-slide-changed="slideHasChanged($index)"> 
     <ion-slide> 
      <div class="box blue"><h1>BLUE</h1></div> 
     </ion-slide> 
     <ion-slide> 
      <div class="box yellow"><h1>YELLOW</h1></div> 
     </ion-slide> 
     <ion-slide> 
      <div class="box pink"><h1>PINK</h1></div> 
     </ion-slide> 
    </ion-slide-box>

但後來我利用離子

<ion-tabs> 
    <ion-tab> 
     <ion-nav-view> 
     </ion-nav-view> 
    </ion-tab>

標籤模板如何將能夠把這些一起？

謝謝！

來源

2016-01-27 UniSound Waterloo

可以很容易地對離子標籤結構來完成。

首先，你需要控制器app.js添加到您的標籤：

.state('tab', { 
    url: '/tab', 
    abstract: true, 
    controller: 'TabsCtrl', 
    templateUrl: 'views/base/tabs.html' 
})

然後，你需要在刷卡左，上碰擦右ATTR和修改tabs.html classes：'active-tab - {{activeTab}}「'to your ion-tabs and'nav-tab-0'for you first ion-nav-view。Last number have to increase in next ion-nav-views。

所以你tabs.html應該是這樣的：

<ion-tabs class="tabs-icon-only tabs-color-active-positive active-tab-{{ activeTab }}" on-swipe-left="onSwipeLeft()" on-swipe-right="onSwipeRight()"> 

<ion-tab title="Notifications" icon-off="ion-flag" icon-on="ion-flag" ui-sref="tab.notifications"> 
    <ion-nav-view name="tab-notifications" class="nav-tab-0"></ion-nav-view> 
</ion-tab> 

<ion-tab title="Profile" icon-off="ion-person" icon-on="ion-person" ui-sref="tab.profile"> 
    <ion-nav-view name="tab-profile" class="nav-tab-1"></ion-nav-view> 
</ion-tab> 

<ion-tab title="Home-Map" icon-off="ion-map" icon-on="ion-map" ui-sref="tab.home_map"> 
    <ion-nav-view name="tab-home-map" class="nav-tab-2"></ion-nav-view> 
</ion-tab> 

<ion-tab title="Home-List" icon-off="ion-ios-list" icon-on="ion-ios-list" ui-sref="tab.home_list"> 
    <ion-nav-view name="tab-home-list" class="nav-tab-3"></ion-nav-view> 
</ion-tab> 

<ion-tab title="Create" icon-off="ion-plus-round" icon-on="ion-plus-round" ui-sref="tab.create_event"> 
    <ion-nav-view name="tab-create-event" class="nav-tab-4"></ion-nav-view> 
</ion-tab> 
</ion-tabs>

下一步是填寫你的控制器。在這裏你需要在你的導航欄中按順序列出狀態名稱表。繼承人我的代碼：

$scope.tabList = [ 
     'tab.notifications', 
     'tab.profile', 
     'tab.home_map', 
     'tab.home_list', 
     'tab.create_event' 
    ]; 

    $scope.onSwipeLeft = function() { 
     for(var i=0; i < $scope.tabList.length; i++) { 
      if ($scope.tabList[i] == $state.current.name && i != $scope.tabList.length){ 
       $state.go($scope.tabList[i+1]); 
       break; 
      } 
     } 
    }; 

    $scope.onSwipeRight = function() { 
     for(var i=0; i < $scope.tabList.length; i++) { 
      if ($scope.tabList[i] == $state.current.name && i != 0){ 
       $state.go($scope.tabList[i-1]); 
       break; 
      } 
     } 
    }; 

    $scope.$on('$ionicView.enter', function() { 
     for(var i=0; i < $scope.tabList.length; i++) { 
      if ($scope.tabList[i] == $state.current.name){ 
       $scope.activeTab = i; 
       break; 
      } 
     } 
    });

末，這是動畫和hidding離子導航的視圖，所有你可以在你的SCSS文件，這樣做：

.tab-content { 
    display: block; 
    opacity: 0; 
    @include transition-property('left, right'); 
    @include transition-duration(.3s); 
} 

$tabs-count: 5; 

@for $i from 0 through $tabs-count { 
    @for $j from 0 through $tabs-count { 
     .active-tab-#{$i} { 
      @if $i == $j { 
       .nav-tab-#{$j} { 
        opacity: 1; 
        left: 0 !important; 
        right: 0 !important; 
       } 
      } 
      @if $i > $j { 
       .nav-tab-#{$j} { 
        left: -100%; 
        right: 100%; 
       } 
      } 
      @if $i < $j { 
       .nav-tab-#{$j} { 
        left: 100%; 
        right: -100%; 
       } 
      } 
     } 
    } 
}

所以所有togather使它像本地標籤應用程序一樣工我希望我能幫到，這個解決方案對我很好。

來源

2016-03-29 12:12:53

使用on-swipe-right="goTo('tabs.tab3')"和on-swipe-left="goTO(tabs.tab1)"和JavaScript是

.run(function($rootScope, $state){ 
    $rootScope.goTo = function(stateName){ 
    /*$state.go(stateName)*/ 
    alert(stateName); 
    $state.go(stateName); 
    } 
})

來源

2016-01-28 03:56:06

標籤模板之間的離子滑動

回答

相關問題