Add Swipe Gesture to Ionic 3 Angular 5 Tabs

by Didin J. on Jan 07, 2018 Add Swipe Gesture to Ionic 3 Angular 5 Tabs

Just a short example of adding swipe gesture to Ionic 3 Angular 5 Tabs with transition animation

This is just a short example of adding swipe gesture to Ionic 3 and Angular 5 tabs with transition animation. The tutorial is requested from one of our reader which need add swipe gesture to the current Ionic 3 Tabs. It might be can be applied to other components that need custom touch gesture. We will use Telerik Native Page Transition plugin for making the animation to the tabs change. We use the native plugin because we are testing this tutorial on the real device.

The following tools, framework, and modules are required for this example:

- Ionic 3 Framework
- Node.js
- Angular 5
- Telerik Native Page Transition Plugin
- Terminal or Command Line
- IDE or Text Editor

Make sure before continuing to the example, you have installed the latest recommended Node.js. Check the Ionic 3 for the latest version.

node -v
v8.9.3
npm -v
5.5.1
ionic -v
3.19.0
cordova -v
7.1.0

To update the Ionic framework to the latest version type this command.

sudo npm i -D -E [email protected]


1. Create a New Ionic 3 Angular 5 App

As usual, we always creating an example from scratch by creating a new app. Type this command to create a new Ionic 3 Angular 5 app using Tabs template.

ionic start ionic3-tab-swipe tabs

That command will create Ionic 3 Angular 5 app with the name `ionic3-tab-swipe` and use Tabs template as default layout. Next, go to the newly created app folder.

cd ./ionic3-tab-swipe

Now, run the app on the browser to make sure everything works smoothly.

ionic serve -l

You should see this page if everything configured correctly.

Add Swipe Gesture to Ionic 3 Angular 5 Tabs - Ionic 3 tabs


2. Modify Current Tabs by Adding Swipe Gesture

We will do a little modification of the current tabs and tab pages. First, to make a different look and feel between tabs, we have to change a different background color for them. Open and edit `src/pages/home/home.scss` then add this lines of CSS codes inside `page-home` bracket.

.scroll-content {
  background-color: red;
  background-image: linear-gradient(red, orange);
  color: white;
}

And this lines to `src/contact/contact.scss`.

.scroll-content {
  background-color: green;
  background-image: linear-gradient(green, yellow);
  color: white;
}

And this lines to `src/about/about.scss`.

.scroll-content {
  background-color: blue;
  background-image: linear-gradient(blue, aqua);
  color: white;
}

About page still blank, so we fill it with some free text with header and paragraph.

<h2>About This Example</h2>
<p>
  This is just a little example that might be unuseful for you, sorry if that's make you happy.
</p>

Next, add swipe gesture to each page. Open and edit `src/pages/home/home.html` then add this `div` tag inside `ion-content` tag wrap all content.

<ion-content padding>
  <div class="main-content" (swipe)="swipe($event)">
    <h2>Welcome to Ionic!</h2>
    <p>
      This starter project comes with simple tabs-based layout for apps
      that are going to primarily use a Tabbed UI.
    </p>
    <p>
      Take a look at the <code>src/pages/</code> directory to add or change tabs,
      update any existing page or create new pages.
    </p>
  </div>
</ion-content>

Do the same way with `about.html` and `contact.html`. Don't put `swipe` code inside `ion-content` because it's won't works on the real device. So, we need to set the height of that all `div` by open and edit `src/app/app.scss` then add this CSS codes below of the file.

.main-content {
  height: 100%;
}

Open and edit `src/pages/home/home.ts` then add this function.

swipe(event) {
  if(event.direction === 2) {
    this.navCtrl.parent.select(1);
  }
}

Open and edit `src/pages/home/contact.ts` then add this function.

swipe(event) {
  if(event.direction === 4) {
    this.navCtrl.parent.select(1);
  }
}

Open and edit `src/pages/home/about.ts` then add this function.

swipe(event) {
  if(event.direction === 2) {
    this.navCtrl.parent.select(2);
  }
  if(event.direction === 4) {
    this.navCtrl.parent.select(0);
  }
}

That just enabling the swipe gesture, you can try by running the app again in the browser.

ionic serve -l

Or in the real device, but first, remove and add the platform.

ionic cordova platform rm android
ionic cordova platform add android
ionic cordova platform rm ios
ionic cordova platform add ios

Then run on the real device.

ionic cordova run android
ionic cordova run ios

Add Swipe Gesture to Ionic 3 Angular 5 Tabs - On The Android


3. Add Transition Animation for Tabs Change

Above step not like swipe-able tabs, because every time the tab change it not started by transition animation. We will use Telerik Native Page Transition plugin for this because we are using the real device. Install the plugin by type this commands.

ionic cordova plugin add com.telerik.plugins.nativepagetransitions
npm install --save @ionic-native/native-page-transitions

Open and edit `src/app/app.module.ts` then add this import.

import { NativePageTransitions } from '@ionic-native/native-page-transitions';

Also, add to `@NgModule` providers.

providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  NativePageTransitions
]

Next, open and edit `src/pages/tabs/tabs.ts` then add this import.

import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';

Inject that module to the constructor.

constructor(private nativePageTransitions: NativePageTransitions) {}

Declare these variables for hold tabs index and check if tab is loaded.

loaded:   boolean = false;
tabIndex: number  = 0;

Create the function for getting animation direction by tab index.

private getAnimationDirection(index):string {
  var currentIndex = this.tabIndex;

  this.tabIndex = index;

  switch (true){
    case (currentIndex < index):
      return('left');
    case (currentIndex > index):
      return ('right');
  }
}

Create the function for the animated transition.

public transition(e):void {
  let options: NativeTransitionOptions = {
   direction:this.getAnimationDirection(e.index),
   duration: 250,
   slowdownfactor: -1,
   slidePixels: 0,
   iosdelay: 20,
   androiddelay: 0,
   fixedPixelsTop: 0,
   fixedPixelsBottom: 48
  };

  if (!this.loaded) {
    this.loaded = true;
    return;
  }

  this.nativePageTransitions.slide(options);
}

Now, open and edit `src/pages/tabs/tabs.html` then add this codes inside `ion-tabs` tag.

<ion-tabs (ionChange)="transition($event)">

Now, you can run again on the real device and see how it looks like.

That's it, a simple swipe gesture on Ionic 3 tabs. For the full source code, you can grab on our GitHub.

Or take the following course:

Thanks!

The following resources might be useful for you:

Loading…