Swipeable Tabbed Views (make tabbed template swipeable)

1

It’s been a while I have been trying to make the standard tabbed template swipeable.

This is the tabs part in the template (implementing tabbed views):

<!-- Views/Tabs container -->
<div class="views tabs safe-areas">
  <!-- Tabbar for switching views-tabs -->
  <div class="toolbar toolbar-bottom tabbar-labels">
    <div class="toolbar-inner">
      <a href="#view-home" class="tab-link tab-link-active">
        <i class="icon f7-icons if-not-md">house_fill</i>
        <i class="icon material-icons if-md">home</i>
        <span class="tabbar-label">Home</span>
      </a>
      <a href="#view-catalog" class="tab-link">
        <i class="icon f7-icons if-not-md">square_list_fill</i>
        <i class="icon material-icons if-md">view_list</i>
        <span class="tabbar-label">Catalog</span>
      </a>
      <a href="#view-settings" class="tab-link">
        <i class="icon f7-icons if-not-md">gear</i>
        <i class="icon material-icons if-md">settings</i>
        <span class="tabbar-label">Settings</span>
      </a>
    </div>
  </div>

  <!-- Your main view/tab, should have "view-main" class. It also has "tab-active" class -->
  <div id="view-home" class="view view-main view-init tab tab-active" data-url="/">
    <!-- Home page will be loaded here dynamically from / route -->
  </div>

  <!-- Catalog View -->
  <div id="view-catalog" class="view view-init tab" data-view="catalog" data-url="/catalog/">
    <!-- Catalog page will be loaded here dynamically from /catalog/ route -->
  </div>

  <!-- Settings View -->
  <div id="view-settings" class="view view-init tab" data-view="settings" data-url="/settings/">
    <!-- Settings page will be loaded here dynamically from /settings/ route -->
  </div>
</div>

I would like to make it swipeable, but adding the swipeable wrapper outside this block does not work. I have also tried many other combinations with no success. How should you proceed in this case?

<div class="tabs-swipeable-wrap"></div>

2
3

Hi shastox,

thanks for your reply.

I have tried the structure suggested in your URL, and with “.tabs-animated-wrap” it does work (transitions happen changing the tabs using the tabbar), while changing it with “.tabs-swipeable-wrap” does not work, and it does even break the tab system (tabbar does no longer change the views in the tabs).

Could it have to do with the swipe being received into the view and not by the swiper?

4

Hello guys, any clue on how to make sipeable tabbed views possible? I still have found no way.

5

HTML

<div id="app">
  <!-- ... -->
  <div class="views tabs-swipeable-wrap safe-areas swiper-container">
    <div class="toolbar toolbar-bottom tabbar-labels">
      ...
    </div>
    <div class="swiper-wrapper tabs">
      <div id="view-home" class="view view-main view-init tab tab-active swiper-slide">...</div>

      <div id="view-catalog" class="view view-init tab swiper-slide" data-view="catalog">...</div>

      <div id="view-settings" class="view view-init tab swiper-slide" data-view="settings">...</div>
    </div>
  </div>
  <!-- ... -->
</div>

JS

const app = new Framework7({
  // ...
})
// Create Views Swiper manually
const viewsSwiper = app.swiper.create('.views', {
  on: {
    slideChange() {
      const swiper = this;
      const id = swiper.slides.eq(swiper.activeIndex).attr('id');
      app.tab.show(`#${id}`);
    }
  }
});
app.on('tabShow', (tabEl) => {
  if ($$(tabEl).hasClass('view')) {
    viewsSwiper.slideTo($$(tabEl).index());
  }
});
6

Thank you so much, it is finally working perfectly!

This should be added as an example into the official docs imho.

7

I got some problems with this Solution:

  1. Swipeback acts in an unwanted manner => resulting in also swiping the “tab”
    Fixed with “swiper-no-swiping”
  2. Swipeout also acts unwanted and will be used when swiping a tab or when swiping it, the tab gets swiped
    Fixed with “swiper-no-swiping”
  3. Is there a way to prevent deeper routing from swipeing left/right ?
    Fixed with “swiper-no-swiping”
1 Like
8

I am also facing the same issue. would you please tell me how did you achieve it? where do I need to add a class ’ swiper-no-swiping’?

9

I suggest to not use the “swipeable” Tabbed Views because it will bring up much more not wanted issues which needs resolving, So I simply ditched it totally and kept it without swipeable.

but if you insist in using it these are my recommended Settings:

         data-initial-slide="0"
         data-nested="true"
         data-resistance-ratio="0"
         data-preventInteraction-on-transition="true"
         data-no-swiping="true"
         data-no-swiping-class="views-no-swiping"

Thats what i used for the “Main” Swiper which controls the views
and i didn’t use auto init since i need to hook something:

                app.viewsSwiper = app.swiper.get('.views-swiper.swiper-container');
                app.viewsSwiper.on('slideChange', function () {
                    const swiper = this;
                    const id = swiper.slides.eq(swiper.activeIndex).attr('id');
                    app.tab.show('#'+id);
                })
                app.on('tabShow', (tabEl) => {
                    if (self.$(tabEl).hasClass('view')) {
                        app.viewsSwiper.slideTo(self.$(tabEl).index());
                    }
                });

this was working alright but you have to add views-no-swiping everywhere where u do another kind of swipe gesture and sometimes that is not enough. it was quite inconsistent, or you add all classes of “Swipeable” content into that no-swiping parameter

So maybe at some point there will be an built in solution optimized for that use.

Also add IDs or Keys for the views and for the swiper

10

Got the point. Thank you so much. Swipeable Tabs component itself is inconsistant.

11

Using swipeable views over traditional swipeable tabs offer any performance improvement. I believe there are two possible scenarios.
1)Since we are not loading content of all tabs(views in this case) at the start, it may improve initial startup time.
2) But now it will load a page on swipes, the transition might not be so smooth considering that each page might have some API calls…
I’m currently creating an app with swipeable tabs.
What’s your preference for such ui swipeable tabs or swipeable tabs having different pages as its content?