I am grateful for the framework7 family, and all the effort put into this project thus far.
I am new to it (7 months now). I recently started a framework7 Vue CLI tabbed view app, with the structure of the home page shown below.
My question or confusion is, upon render of the home page all the components of each tab are rendered at the same time, and my thought is that this can impact performance especially when you need to load large datasets or there’s a large number of request made in each component.
How can I make only one component (that is the active tab) to load first, while the others are only brought into view when their respective tab is active (i.e. clicked), is it something that is already available and I may not know about.
You can’t use tabbed View inside of Page, it is supported only in main App component as app layout.
My question or confusion is, upon render of the home page all the components of each tab are rendered at the same time, and my thought is that this can impact performance especially when you need to load large datasets or there’s a large number of request made in each component.
No any issues here. You can listend for tab:show event on View and based on that (when tab become visible) do your heavy database loading
Is there a way to listen for the tab:show event inside the Page that is viewed? Or to avoid to mounting the page until the tab:show event is triggered?
It is possible, by listening it on parent tab of current page.
For example (if it is a F7-Core router component), you can add something like this in page:init handler:
@nolimits4web please can u give me an example of how to implement this, I have looked all through the documentation and couldn’t find an implementation of this. Please help
Thanks but I want to listen on the tab:show in the children vue component, not in the app. Or all the code for each tab will be in the app.vue file, but I need local logic
So if I could understand the usage of for this lazy-loading routes is wrong…
To have routes loaded separated, we should architecture our application into tabs instead!
Did anyone face any further limitation due to this approach?
I create my whole application with views… and now I have an App loading 12 different screens and consuming my API at same time as soon user clicks on it
When I changed all my views to tabs, I faced the limitation with routes and links!
I couldn’t control anymore different views on the App (since they don’t exists anymore) and lost also the opening animation for all links!
The best solution I’ve found is:
initRouterOnTabShow="true"
It makes your view component be mounted only when this view (working as tab) is visible!
And you can still using all views properties!