Ionic 3 | Create Swipeable/ Draggable Tab Pages Application in Ionic 3

Like we see in popular applications like Instagram, we usually have different views which can be easily swiped or dragged right to left to change the view. Today we will implement same user interface having swipeable pages instead of tradition Tap to Change scenario.

To implement Swipe pages we will use ionic2-super-tabs for Ionic 3

First, we will create an application with three pages.

Install Super Tabs plugin

Go to the application root

Create new pages

In app.module.ts import Super Tabs module, then add in imports array

To use super tabs in the home page, we need to include super tab module in home.module.ts

In home.ts, we will have an array of tabs pages having page details like icons, title etc

selectedTabIndex will keep track of current tab index, onTabSelect method is called when the tab is changed or swipped!

In home.html add super-tab directive looping for pages array

Now you can run the application to see it working in a browser, but swipe will on only work in the real device.

Or you can test in the browser by enabling sensors in chrome browser debugger.




Leave a Reply

Notify of