How to swipe through different ionic tabs
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.
Related videos on Youtube
LewisJWright
Updated on September 16, 2022Comments
-
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 almost 9 yearsBut you wont get that
slide
animation when you do this. -
LarsBauer almost 9 yearsWhat do you mean with slide animation? Can you give an example please?
-
krv over 8 yearsthis 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 almost 8 yearsAh 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 over 7 yearsWonderful. Someone has developed the animation?
-
Vahid Najafi over 7 yearsNice solution! Thanks for sharing :)
-
PJDev over 7 yearsAnother 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.