Hi, I will try to be as concise and accurate as possible. I think I found a problem with the tabs component when used in conjunction with: routable tabs, scrollable tabs and swipeable tabs.
Let’s see for now, the code that works with only a few graphical glitches.
I have a route in which I visualize in detail a restaurant, whose ID is passed as a parameter.
[..]
{
path: '/restaurant/:restaurant_id/',
component: RestaurantPage,
tabs : [
{
path: '/',
id: 'tab-restaurant-main',
component: RestaurantMainComponent,
async({ resolve, reject }) {
i18n.get_translations().then(i18n.insert_translations)
}
},
{
path: '/menu/',
id: 'tab-restaurant-menu',
component: RestaurantMenuComponent,
async({ resolve, reject }) {
i18n.get_translations().then(i18n.insert_translations)
}
},
{
path: '/order/',
id: 'tab-restaurant-order',
component: RestaurantOrderComponent,
async({ resolve, reject }) {
i18n.get_translations().then(i18n.insert_translations)
}
},
{
path: '/reviews/',
id: 'tab-restaurant-reviews',
component: RestaurantReviewsComponent,
async({ resolve, reject }) {
i18n.get_translations().then(i18n.insert_translations)
}
},
{
path: '/contact/',
id: 'tab-restaurant-contact',
component: RestaurantContactComponent,
async({ resolve, reject }) {
i18n.get_translations().then(i18n.insert_translations)
}
}
],
async({ resolve, reject }) {
i18n.get_translations().then(i18n.insert_translations)
resolve(utils.check_is_logged(RestaurantsPage, LoginPage))
}
}, [...]
Inside the main view is this piece of code:
<!-- Scrollable page content-->
<div class="toolbar tabbar tabbar-scrollable toolbar-top">
<div class="toolbar-inner">
<a class="tab-link link-active" href="./" data-route-tab-id="tab-restaurant-main" data-i18n="RESTAURANT_PAGE.TAB_HOME"></a>
<a class="tab-link" href="./menu/" data-route-tab-id="tab-restaurant-menu" data-i18n="RESTAURANT_PAGE.TAB_MENU"></a>
<a class="tab-link" href="./order/" data-route-tab-id="tab-restaurant-order" data-i18n="RESTAURANT_PAGE.TAB_ORDER"></a>
<a class="tab-link" href="./reviews/" data-route-tab-id="tab-restaurant-reviews" data-i18n="RESTAURANT_PAGE.TAB_REVIEWS"></a>
<a class="tab-link" href="./contact/" data-route-tab-id="tab-restaurant-contact" data-i18n="RESTAURANT_PAGE.TAB_CONTACT"></a>
</div>
</div>
<div class="tabs tabs-routable">
<div id="tab-restaurant-main" class="tab page-content tab-active"></div>
<div id="tab-restaurant-menu" class="tab page-content"></div>
<div id="tab-restaurant-order" class="tab page-content"></div>
<div id="tab-restaurant-reviews" class="tab page-content"></div>
<div id="tab-restaurant-contact" class="tab page-content"></div>
</div>
So far everything works, the various pages are loaded correctly and within each component / tabs page I can access the ID of the restaurant in this way: let restaurant_id = props['restaurant_id']
.
There is a small graphical glitch if I add the tabbar-scrollable
class, that is, the bottom border of the first active tab is not at the same width as the link. If I then click on the link of another tab and go back, everything works out. I’ll leave 3 images to see what happens. I think it’s a problem with fw7, because the code is almost identical to the demo. If I remove tabbar-scrollable
the glitch doesn’t show up. Can it be fixed?
Now comes the most painful problem. I want to have swipeable tabs, so I modified my code like this:
<div class="tabs-swipeable-wrap">
<div class="tabs tabs-routable">
<div id="tab-restaurant-main" class="tab page-content tab-active"></div>
<div id="tab-restaurant-menu" class="tab page-content"></div>
<div id="tab-restaurant-order" class="tab page-content"></div>
<div id="tab-restaurant-reviews" class="tab page-content"></div>
<div id="tab-restaurant-contact" class="tab page-content"></div>
</div>
</div>
What happens is:
-
at the first swipe, the second tab is not selected properly as you can see from the screenshot
-
at each swipe, this event occurs in the main page that contains the html of the tabs (the one above). This event is not triggered without
tabs-swipeable-wrap
. The problem is that at each swipe I lose the reference to:props['restaurant_id']
because it seems to reload the page without keeping the route parameter:/:restaurant_id/
.
$on('pageAfterOut', async() => {})
Number two is the biggest problem. Am I doing something wrong with the tabs implementation? Or is there a bug with fw7?