如何通過不同的離子選項卡刷卡

Question

的第一篇文章曾經在這裏，但真的很感激一些這方面的幫助或建議：

我目前正在建設使用離子型框架的一個項目，建設一個功能版本後，我決定，具有在選項卡之間滑動以顯示應用程序的單獨部分的能力。

我建立使用離子報價所以每一頁是通過離子NAV-視圖元件示出和是通過在app.js文件中聲明狀態變化稱爲模板的標籤模板應用程序（見下面）：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if (window.StatusBar) { 
     // org.apache.cordova.statusbar required 
     StatusBar.styleLightContent(); 
    } 
    }); 
}) 

.config(function($stateProvider, $urlRouterProvider) { 

    // setup an abstract state for the tabs directive 
    .state('tab', { 
    url: "/tab", 
    abstract: true, 
    templateUrl: "templates/tabs.html" 
    }) 

    // Each tab has its own nav history stack: 

    .state('tab.dash', { 
    url: '/dash', 
    views: { 
     'tab-dash': { 
     templateUrl: 'templates/tab-dash.html', 

     } 
    } 
    }) 

    .state('tab.notes', { 
     url: '/notes', 
     views: { 
     'tab-notes': { 
      templateUrl: 'templates/tab-notes.html', 
      controller: 'noteController' 
     } 
     } 
    }) 

    .state('tab.todos', { 
    url: '/todos', 
    views: { 
     'tab-todos': { 
     templateUrl: 'templates/tab-todos.html', 
     controller: 'todoController' 
     } 
    } 
    }) 

    .state('tab.doodles', { 
    url: '/doodles', 
    views: { 
     'tab-doodles': { 
     templateUrl: 'templates/tab-doodles.html', 
     } 
    } 
    }) 

    // if none of the above states are matched, use this as the fallback 
    $urlRouterProvider.otherwise('/tab/dash'); 

}); 

我想知道的是;有沒有一種方法可以讓用戶左右滑動切換不同的頁面？

這有可能嗎？如果是這樣，是否需要滾動時也是如此？

我希望這是足夠的細節，如果不是，我會很樂意提供儘可能多的我可以。感謝收聽！

Answer 1

是的，這是可能的。我打得四處標籤模板，並得出如下結果：

<ion-content on-swipe-right="goBack()" on-swipe-left="goForward()"> 

而且在每個控制器，您將需要相應的功能：

.controller('MyCtrl', function ($scope, $ionicTabsDelegate) { 

    $scope.goForward = function() { 
     var selected = $ionicTabsDelegate.selectedIndex(); 
     if (selected != -1) { 
      $ionicTabsDelegate.select(selected + 1); 
     } 
    } 

    $scope.goBack = function() { 
     var selected = $ionicTabsDelegate.selectedIndex(); 
     if (selected != -1 && selected != 0) { 
      $ionicTabsDelegate.select(selected - 1); 
     } 
    } 
}) 

我不知道這是不是最好的做法，非常健壯。就像我說的，我在閱讀docs後玩了一會兒。

我希望我給你一個它如何工作的想法。