Any good Ionic2 scroll tab bar example out there?

Ionic Framework ionic-v3
1

Is there any good example of a scrollable tab bar using ionic2. I have tried to use ion-scroll but it does not work for me. A good example would be appreciated as it is a fairly normal scenario. scrolling should be a property of menu, list…and not something separate.

Thanks

2

Hello,

I had something fairly usable using tabbar listening to change events on ion-slides. That was fairly simple but felt quite slow. I ended up tweaking the ionic library to improve the feeling of it and the final result was quite good

By memory, ionic was waiting until the transition from the slider was completely finish to trigger the change event (which was feeling like a weird latency on actual device). However I read a bit on swiperjs (which is the libraries they use) and was able to fix it by triggering the change update when the change start. It was feeling way better.

In other word I had the hack in node_modules/ionic-framework/components/slides/slide.js, just can’t find the code back …

EDIT:
just found out there is no need for a hack anymore as they are now triggering the interesting event precisely where I had my hack: feat(slides): add slideChangeStart event output · ionic-team/ionic-framework@736140c · GitHub

just a slider, a tabbar and listening to the slideChangeStart to update the tab correctly and it works!!
Another bit of code to handle the tab click and voila

3

Thanks for the update. I will try it. Any sample code would be appreciated.

Thanks

Patrice

4

That was just a poc for a prototype and I didn’t move forward with this design, but here it was:

<ion-toolbar>
    <ion-segment [(ngModel)]="currState">
        <ion-segment-button value="0">
            A
        </ion-segment-button>
        <ion-segment-button value="1">
           B
        </ion-segment-button>
        <ion-segment-button value="2">
            C
        </ion-segment-button>
    </ion-segment>
</ion-toolbar>

<ion-content>
    <ion-slides index={{currState}} (change)="onTabUpdate($event)">
        <ion-slide>
            <scroll-content>
                anything you want here
            </scroll-content>
        </ion-slide>
    </ion-slides>
</ion-content>

and something like that in the controller:

onTabUpdate(event){
        let newIndexAfterUpdate = event.activeIndex;
        this.currState = String(newIndexAfterUpdate);
 }

Quite simple, no fancy thing here
As said in the previous post, you can now plug directly in the event that was add a few days ago so that you won’t need to hack the inside of ionic anymore.

5

Hi,

I think I did not make myself clear. It is the toolbar that I want scrollable and not the content. Thanks anyway. I will keep experimenting.

Cheers,

Patrice

6

This is something we plan on adding in beta.6:

2 Likes
7

Thanks,

Any idea of the timeframe.

Thanks

Patrice

8

I would also love to have this feature. Since it’s now beta.23, is there an updated timeline when this will be added?

Thanks,
Ryan

9

We are currently working on beta.4, the CLI is in beta.23. Once we complete the issues open in beta 4 & 5 we will begin working on this. :slight_smile:

You can find our roadmap with links to each milestone here: https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit?usp=sharing

1 Like
10

Thanks!! I see where I went wrong there. :blush: