When i’m on an page of my app, I can swipe and hit the toolbar links to change from tab. As soon as I change the route (going to another page and coming back to the same page) the swiping is still working but I have the following issue’s:
- I can’t hit the toolbar links to change from tab
- Every animation/moving part of the app is frozen but the actions do happen in the background (contacting the api when a component is done spinning)
You can see the first part happen in this video: https://youtu.be/JWVEUBMEjOc
This issue also happened for this user: https://github.com/framework7io/framework7-vue/issues/290
This is the used code:
Page that was shown first in the video
<f7-page name="offers">
<f7-navbar sliding no-shadow>
<f7-nav-left>
<f7-link icon="icon-bars" open-panel="left"></f7-link>
</f7-nav-left>
<f7-nav-center></f7-nav-center>
<f7-nav-right>
<div class="nav-balance">
Balance:
</div>
<div class="nav-points">
{{ points }}
</div>
</f7-nav-right>
</f7-navbar>
<f7-toolbar tabbar noShadow>
<f7-link tab-link="#offers" active>Offers</f7-link>
<f7-link tab-link="#fortuneWheel">Fortune Wheel</f7-link>
<f7-link tab-link="#rewards">Rewards</f7-link>
</f7-toolbar>
<f7-tabs swipeable>
<f7-page-content tab id="offers" @tab:show="tabChanged('offers')" active>
<offers-tab :active-tab="active_tab"></offers-tab>
</f7-page-content>
<f7-page-content tab id="fortuneWheel" @tab:show="tabChanged('fortuneWheel')">
<fortune-wheel-tab :active-tab="active_tab"></fortune-wheel-tab>
</f7-page-content>
<f7-page-content tab id="rewards" @tab:show="tabChanged('rewards')">
<rewards-tab :active-tab="active_tab"></rewards-tab>
</f7-page-content>
</f7-tabs>
</f7-page>
If any code is needed to fix the issue, let me know
versions used:
- framework7: “1.6.5”
- framework7-vue: “0.9.4”
- vue: “2.5.13”