Tabs not changing when pressing Toolbar links after routing #302


#1

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”