[SOLVED] App structured like Spotify

Hello,
me and my team are using the Framework to create an app whose navigation we intend to be similar to Spotify.
That means:

  • having a bottom navigation bar, always shown
  • each bottom bar button opens a different view/tab which represents a main section
  • inside each tab, navigation occurs by opening new views on top of the previous one, without ever covering the bottom navigation (the only exception to this are temporary fullscreen popups or menus)

We tried with the “Routable Tabs” technique shown in the docs: the bottom bar and tabs are created and routed correctly, yet we can’t understand how to open a view without covering the bottom section. Also, when opening a view (hence by routing) from inside one of the tabs, the <script> tags inside the view’s template are not loaded.
We tried also with the “Views as Tabs” but we couldn’t work it out…

Can someone point us in the right direction? We are new to the app development world, but we’d really like to get into it with F7.

Thank you very much
Marco

I believe you need to start from this template https://framework7io.github.io/framework7-template-tabs/, and forget about Routable Tabs, it doesn’t work for Views as Tabs

Thank you very much,
we’ll try with that!

Hello again,
we decided to opt for Framework7+Vue, and we are rewriting our application.
The app was structured as shown in that linked tutorial, and it used to work.
With F7+Vue, we have not been able to achieve even the basic routing.
The tabs switch correctly, but the routing doesn’t take place, so we aren’t able to load our content as specified in our routes’ "componentUrl"s.
This is our current structure, can you help us to figure out what’s wrong?
(we set the “url” attribute only on view-home and view-profile as we are trying to make those 2 work first)

thank you very much,
have a nice day

Hi,
I am marking as “solved”.
I was missing the tab-link attributes in the toolbar links.
Here’s the final code:

edit: i can’t mark it as solved, you admin(s) can proceed and do it

1 Like