Ionic 2 Hide Show Tabs On Scroll

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, we will take a look at how you can show and hide Tabs On Scroll in an Ionic 2 App. Screen real estate is exceptionally valuable when it comes to mobile apps, so getting those extra few lines of content can make you app look spacious and easy on the eyes. We will start by creating a new app with the tabs template, then when the user scrolls down a certain length the tab bar will be hidden and when the user scrolls back up to the top the bar is displayed.

A thing to note here is that this may cause some frustration among users if they have scrolled a long way down. Then they will have to scroll back up in order for the tabs to show. But that can be tweaked as well. That is a topic for another tutorial. For now, let’s get started with this one.

Step 1)

We will start off by creating a new Ionic 2 app with the tabs template by running the following command in the Terminal / Command Prompt.

Step 2)

Here we will set the tabs placement. This is an optional step, you can specify the location where you want the tabs to show up, i.e, top or bottom. If no location is specified the default location of tabs as per the operating system will be chosen. You can set tabs placement by going through my previous tutorial on How To Place Ionic 2 Tabs At The Bottom Or Top Of The Screen

Step 3)

Now, let’s create our view. In our view, we will need to create a list that will give us some area to scroll. Now open up src\pages\home\home.html and code it as follows.

In the above code on line 7,  notice that we have #contentRef template variable. Also, we are binding the ionScroll event to the scrollingFun($event) function. From line 16 we have a typical list that will display all the items in the items array.

Step 4)

Now it’s time to code up our TypeScript file for the home component, so open up src/pages/home/home.ts and code it as follows

 

Let’s break the above code and understand it piece by piece.

First of all, we are importing  ViewChild on line 1.

Then we are using the contentRef with the view-child inside our class. From the above code, the contentRef template variable will be used in our Typescript code as contentHandle.

Moving on, we are declaring some variables and populating a list

 

Using the Ionic 2 lifecycle hooks we are getting the tab-bar placement and the tab-bar height in the ionviewDidEnter() function

 

Lastly, we have the scrollingFun(e) which is executed on every scroll as shown below.

The function is passed the scroll event e that has the scrollTop property. The e.scrollTop contains the value that the user has scrolled down. It is zero if is the user is at the top.

If the user has scrolled greater than the height of ion-content tag then we hide the tab-bar. We are getting the height of the ion-content tag from the view-child from this.contentHandle.getContentDimensions().contentHeight.

And if the height is less than that of the ion-content tag we are again displaying the tab-bar.

We are doing the actually hiding and showing by setting document.querySelector(".tabbar")['style'].display to none and flex respectively.

Depending on the screen size the value to the tab-bar height and ion-content height will be different. For that reason, we are not using static values, but getting them dynamically and storing them when the view loads using ionViewDidEnter() function.

 

Conclusion

Hiding the tab-bar is a great way to enhance the user experience by giving the user that extra screen space. But a thing to keep in mind is that if the list very long and the user scrolls all the way down then to get the tabs back the user will have to scroll all the way up to get the Tab-Bar back. This is not a big issue as it can easily be addressed by adding a scroll to top button.

If you are using the Tabs template then hiding the Tab-bar is a neat little feature to have in your app.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

  • Luís Siza Jó

    Simple code, working perfectly, thanks

%d bloggers like this: