How to swipe through different ionic tabs

12,847

Yes, this is possible. I played around with the tabs template and came to the following result:

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

And in each controller you will need the corresponding functions:

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

I don't know if this is best practice and very robust. Like I said, I just played around a little after reading the docs.

I hope I gave you an idea of how it could work.

Share:
12,847

Related videos on Youtube

LewisJWright
Author by

LewisJWright

Updated on September 16, 2022

Comments

  • LewisJWright
    LewisJWright over 1 year

    first post ever here but would really appreciate some help or advice on this:

    I am currently building a project using the ionic framework and after building a functional version I decided that having the ability to swipe between tabs to show the separate sections of the app.

    I built the app using the tab template that ionic offers so each page is shown through the ion-nav-view element and is a template called through state changes declared in the app.js file (see below):

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

    What I want to know is; Is there a way I can allow the user to swipe left and right to switch between the different pages?

    Is it even possible? If so, should it be when there is a need to scroll as well?

    I hope this is enough detail, if not I would be happy to provide as much as I can. Thanks for listening!

  • InfinitePrime
    InfinitePrime almost 9 years
    But you wont get that slide animation when you do this.
  • LarsBauer
    LarsBauer almost 9 years
    What do you mean with slide animation? Can you give an example please?
  • krv
    krv over 8 years
    this works but the view are jumped form one view to the other. there is no animation, by animation i mean the kind of pull animation you get when u pull the sidemenu in ionic. the next view pulls from the side and after a breakpoint snaps into the viewport..but thanks this worked
  • LarsBauer
    LarsBauer almost 8 years
    Ah I see... But this should also be possible. Like I said, it's just a proof of concept. You can elaborate it further. I am just giving you a basic idea :)
  • Sebastián Rojas
    Sebastián Rojas over 7 years
    Wonderful. Someone has developed the animation?
  • Vahid Najafi
    Vahid Najafi over 7 years
    Nice solution! Thanks for sharing :)
  • PJDev
    PJDev over 7 years
    Another solution could be using Ionic Slide Box in addition of tabs. One could create page navigation using slide-box (which has built-in animations) and simply add tabs as visual element at the bottom of the page. Clicking on each tab would invoke function which uses $ionicSlideBoxDelegate.slide() to go to proper Slide.