Views As Tabs problem

  1. Using link in view and enabling pushState at the same time will cause ‘page-not-found’ error, please check the sample below:
    https://jsfiddle.net/wxfred/fmj4da1t/

  2. Child page won’t cover over the tabs of views as those tabs are not included in the same view as the child page is.

<div class="views tabs">
  <div class="toolbar"> // views' tabs
    ...
  </div>
  <div class="view">
    <div class="page">...</div> // child page
  </view>
  <div class="view">...</view>
  <div class="view">...</view>
</div>

So based on current structure, I feel it is impossible to make child page to cover views’ tabs, but all the native app I see which contain double-tabbar are not based on this kind of structure.

This will cause route problem, because when pushState is enabled, after you open a child page in View1, you can switch to View2 while the route is still remain ‘…/#!/child-page/’. So, I’m really confused about in which scenario Views As Tabs can be used. Maybe, Views As Tabs was designed to solve the double-tabbar problem, but it can’t, or I don’t get the point to use it correctly.

Views as routable tabs are not supported.

So, I’m really confused about in which scenario Views As Tabs can be used. Maybe, Views As Tabs was designed to solve the double-tabbar problem, but it can’t, or I don’t get the point to use it correctly.

Almost any native iOS app that has tabbar uses same Views as Tabs structure

Thanks for reply. It was my mistake, I didn’t check iOS app. After receiving your message, I opened app store, the tabbar on the bottom of screen didn’t be covered when I opened the child page of current tab.
I have noticed that what I want is different with Views as Tabs’ structure, so I replaced it with routable tab.

Why I choiced Views as Tabs at the beginning is that Views as Tabs supports seprate navigation and layout, hence I could place the second different tabbar in f7-navbar label of each tab page. This is the double-tabbar design I mentioned above which is very popular in chinese app.

And if I click on a post, the child page (or detail page) should cover the whole screen including the bottom tabbar, which is conflict with iOS Views as Tabs.

Today, I found someone ask how to Changing navbar content when using routable tabs, you said it was not supported.

Do you have any advise to implement the double-tabbar design? Or is there a plan to make routable tab support changable navbar?

You need to have the following structure to achieve it:

.views
  .toolbar.tabbar.toolbar-bottom-md
  .view.view-1
    .page
      .toolbar

Where you can have common tabbar for all views and own addition toolbar in each page of view. The problem that iOS theme doesn’t support toolbar on top, so you may need to tweak styles a bit

Thanks a lot, I will try to change styles.

Actually, Views As Tabs has separated navigation and layout for each view. There is no need to tweak styles if you place the addition toobar in navbar.

 .views
   .toolbar.tabbar.toolbar-bottom-md
   .view.view-1
     .page
       .navbar
         .toolbar
   .view.view-2
     .page
       .navbar
         .toolbar

I used this structure for a long period until I found those “child page covering” things. What I want is:

while Views as Tabs is:

I discussed with some other f7 users last day, came up with a workaround - when using Views as Tabs, add no-toolbar to the child page.

1 Like

I have the same issue/wish as you. Do you find a good solution?