Swipeable Tabbed Views (make tabbed template swipeable)

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>

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?

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

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());
  }
});

Thank you so much, it is finally working perfectly!

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

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”