EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 core: Prevent flickering on tab scrolling

main
Pau Ferrer Ocaña 2021-06-10 18:51:51 +02:00
parent a21c7597d7
commit 21d968c84e
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/core/classes/tabs.ts
View File

@ -61,7 +61,6 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
numTabsShown = 0; numTabsShown = 0;
direction = 'ltr'; direction = 'ltr';
description = ''; description = '';
lastScroll = 0;
slidesOpts = { slidesOpts = {
initialSlide: 0, initialSlide: 0,
slidesPerView: 3, slidesPerView: 3,
@ -89,6 +88,8 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
protected slidesSwiper: any; // eslint-disable-line @typescript-eslint/no-explicit-any protected slidesSwiper: any; // eslint-disable-line @typescript-eslint/no-explicit-any
protected slidesSwiperLoaded = false; protected slidesSwiperLoaded = false;
protected scrollElements: Record<string | number, HTMLElement> = {}; // Scroll elements for each loaded tab. protected scrollElements: Record<string | number, HTMLElement> = {}; // Scroll elements for each loaded tab.
protected lastScroll = 0;
protected previousLastScroll = 0;
tabAction: CoreTabsRoleTab<T>; tabAction: CoreTabsRoleTab<T>;
@ -164,6 +165,7 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
this.tabBarElement!.classList.remove('tabs-hidden'); this.tabBarElement!.classList.remove('tabs-hidden');
if (scroll === 0) { if (scroll === 0) {
this.tabBarElement!.style.height = ''; this.tabBarElement!.style.height = '';
this.previousLastScroll = this.lastScroll;
this.lastScroll = 0; this.lastScroll = 0;
} else if (scroll !== undefined) { } else if (scroll !== undefined) {
this.tabBarElement!.style.height = (this.tabBarHeight - scroll) + 'px'; this.tabBarElement!.style.height = (this.tabBarHeight - scroll) + 'px';
@ -253,17 +255,13 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
return; return;
} }
if (!this.tabsShown) { if (window.innerHeight >= CoreTabsBaseComponent.MAX_HEIGHT_TO_HIDE_TABS) {
if (window.innerHeight >= CoreTabsBaseComponent.MAX_HEIGHT_TO_HIDE_TABS) { // Ensure tabbar is shown.
// Ensure tabbar is shown. this.applyScroll(true, 0);
this.tabsShown = true; this.calculateTabBarHeight();
this.tabBarElement?.classList.remove('tabs-hidden'); } else if (!this.tabsShown) {
this.lastScroll = 0; // Don't recalculate.
this.calculateTabBarHeight(); return;
} else {
// Don't recalculate.
return;
}
} }
await this.calculateMaxSlides(); await this.calculateMaxSlides();
@ -504,7 +502,7 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
return; return;
} }
if (scrollTop == this.lastScroll) { if (scrollTop == this.lastScroll || scrollTop == this.previousLastScroll) {
// Ensure scroll has been modified to avoid flicks. // Ensure scroll has been modified to avoid flicks.
return; return;
} }
@ -522,6 +520,7 @@ export class CoreTabsBaseComponent<T extends CoreTabBase> implements OnInit, Aft
} }
// Use lastScroll after moving the tabs to avoid flickering. // Use lastScroll after moving the tabs to avoid flickering.
this.previousLastScroll = this.lastScroll;
this.lastScroll = scrollTop; this.lastScroll = scrollTop;
} }