The Smooth Scroll component conflicts with the Tabs component. If you add Smooth Scroll to the project along with Tabs, then Tabs switching stops working normally:
v1
However, if you remove Smooth Scroll from the project, the tabs start working normally:
v2
How is your smooth scroll component configured? What is set as its target?
The specified page does not use smooth scroll at all. Smooth scroll is just connected as a component on the main page and that’s it, this is enough for a conflict: <script src= " dmxAppConnect/dmxSmoothScroll/dmxSmoothScroll.js" defer=""></script>
As soon as I remove this connection, the Tabs component starts working normally.
Are there any errors in the console, when you run your page in the browser and try changing tabs?
That’s what I checked first. No errors in the console.
The problem remains unresolved. This prevents you from implementing very useful functionality in the mobile app.
The scroll component is probably still in the DOM, Framework7 leaves other pages in the DOM or only detaches them, the smoothscroll component stays active even after changing to a different page. You could change the default selector a[href*="#"] to something like [data-scroll] so that it only attaches to elements with the data-scroll attribute or you exclude the tabs by ignoring .tab-link.
The solution works perfectly. Thanks!