选项卡模板之间的离子滑动答案

【问题标题】：Ionic sliding between tabs template选项卡模板之间的离子滑动
【发布时间】：2016-01-27 19:59:55
【问题描述】：

我下载了 Ionic 标签模板。我玩了一段时间，想知道如何添加一个可以在选项卡之间导航的滑动功能。在这种情况下，我想滑动动画和平滑过渡，而不是突然切换标签。

我在 Ionic Docs 上看到了。它有这个滑动框功能。

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

但是我使用的是 Ionic 的标签模板

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

我怎样才能将这些合并在一起？

谢谢！

【问题讨论】：

标签： javascript html css ionic-framework

【解决方案1】：

可以在 IONIC 选项卡结构上轻松完成。

首先，您需要在 app.js 中将控制器添加到您的选项卡：

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

然后，您需要使用 on-swipe-left、on-swipe-right attr 和 classes: 'active-tab-{{ activeTab }}"' 修改您的 tabs.html 到您的 ion-tabs 和 'nav- tab-0' 为您的第一个 ion-nav-view 。最后一个数字必须在下一个 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;
            }
        }
    });

最后这是动画和隐藏的 ion-nav-views，所有你可以在你的 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%;
                }
            }
        }
    }
}

所有这些加在一起使它像原生标签应用一样工作。我希望我有所帮助，这个解决方案对我很有用。

【讨论】：

【解决方案2】：

使用 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);
  }
})

【讨论】：