Framework7: Swipeable Tabs with Scrollable Tab Bar

[vaibhavch]

Since swipeable tabs component in F7 has fixed width with only tabs. How can i deal with more number of tabs like scrollable tab bar component.

I have already trie to implement with "tabbar-scrollable" class. But it messed up and shows nothing.

I got this error in console.
Uncaught TypeError: Cannot read property 'offsetWidth' of undefined material-tabbar.js:12

[nolimits4web]

Can you show what have you tried?

[vaibhavch]

I made it worked by adding "tabbar-scrollable" class to the swipable tabs.

But there is also one issue. Since there are many tabs, we can browse those tabs with scrollable tabs component But the last few tabs are not appearing in menu. how can we make to display when sliding through content?

Please see what i have implemented. I am unable to display extra tabs while sliding content. See the page in mobile resolution and try to swipe through the content.

http://goo.gl/EqOmnJ

[vaibhavch]

any update on this issue?

[nolimits4web]

Swipeable tabs are just basically the Swiper. So you have to options:
1) Use Swiper's onSlideChnageStart callback to detect active slide and using $$('.toolbar-inner').scrollLeft(position, duration) method to scroll tab links to required position
2) You can just use 2 swipers (one for tabs itself and another one for tab links where each slide is a link) using Swiper's controller feature like in example here http://www.idangero.us/swiper/demos/23-thumbs-gallery.html

[vaibhavch]

I prefer the 1st option which you mentioned. anything wrong with the below code?

also what to actually replace the "position" and "duration" params? an example will be great.

var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChangeStart', function () {
$$('.toolbar-inner').scrollLeft(position, duration);
});

[vaibhavch]

var mySwiper = new Swiper('.swiper-container'); mySwiper.on('slideChangeStart', function () { console.log('slide change start'); $$('.toolbar-inner').scrollLeft(200,1) });

This isn't detecting my slider changes.

[vaibhavch]

Thanks for the two options. I have solved my issue on my own using 1st option.

[RobertoArg]

Hi @vaibhavch , i'm interested in your solution 'cause i can't solve that issue T.T

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.