Hi,
I have 2 problems:
- Ionic is amazing, I love it, but the app on iOS doesn’t look like a native one, because of the transitions between pages. On browser seems like all is good but on iOS (both simulator and real device) the transitions are not fluid, they are fluid just for the opening of modals.
What I use to navigate though pages is:
<button routerLink="/annunci-affitto" routerDirection="root"> <i class="fas fa-search" style="font-size: 22px"></i></button>
or
this.navController.navigateForward('annuncio/' + idListing);
Works better if I swipe to the right on going back, but with the back button has that behaviour.
The problems are present for both ways. I’m using a custom bottom tab bar because I’m using not fixed paths (eg ‘annuncio/’ + idListing) and I had problems with the selected tab to be shown with the default tab bar.
How can I have fluid transitions?
I would like something simple, like that:
But in mine app when I navigate forward to a new page seems like some elements of the previous page are still present meanwhile the page is transitioning and the same for the headers that seems like “mixed” together with a very ugly behaviour.
- I would like also to know how to not reload the content of a page while navigating using the tabs at the bottom, I did the tab bar in that way:
<ion-footer id="footer" *ngIf="!GlobalFields.loading && !isSelected('annuncio') && isKeyboardHide" style="background-color: #fffffff0 !important; background-image: url('../../assets/imgs/background_home.png');">
<ion-toolbar>
<table class=buttonsFooterTabs>
<tr>
<td [class.selectedTab]="isSelected('home')">
<button routerLink="/home" routerDirection="root"> <i class="fas fa-home" style="font-size: 22px"></i></button>
</td>
<td [class.selectedTab]="isSelected('annunci-affitto')">
<button routerLink="/annunci-affitto" routerDirection="root"> <i class="fas fa-search" style="font-size: 22px"></i></button>
</td>
<td></td>
<td [class.selectedTab]="isSelected('appuntamenti')">
<button routerLink="/appuntamenti" routerDirection="root"> <i class="far fa-calendar-alt" style="font-size: 22px"></i></button>
</td>
<td [class.selectedTab]="isSelected('il-mio-account')">
<button routerLink="/il-mio-account" routerDirection="root">
<i *ngIf="!GlobalFields.isLoggedIn " class="{{GlobalFields.site_details.profileTabIcon}}" style="font-size: 22px"></i>
<img *ngIf="GlobalFields.isLoggedIn" src="{{GlobalFields.profile.user.avatar}}" style="height: 25px; border-radius: 55px;">
</button>
</td>
</table>
</ion-toolbar>
</ion-footer>
I would like to know how can I not reload the content. Thank you.