Angular 离子4:滚动时隐藏离子标签栏,就像LinkedIn应用程序一样
我使用默认离子标签栏,底部位置如LinkedIn应用程序所示。 我想在滚动时隐藏选项卡栏,并在滚动停止时再次显示。此功能可以在LinkedIn应用程序中看到 这里是tabs.page.htmlAngular 离子4:滚动时隐藏离子标签栏,就像LinkedIn应用程序一样,angular,ionic-framework,ionic4,Angular,Ionic Framework,Ionic4,我使用默认离子标签栏,底部位置如LinkedIn应用程序所示。 我想在滚动时隐藏选项卡栏,并在滚动停止时再次显示。此功能可以在LinkedIn应用程序中看到 这里是tabs.page.html <ion-tabs > <ion-tab-bar slot="bottom" > <ion-tab-button tab="tab1"> <ion-icon name="desktop"></ion-icon>
<ion-tabs >
<ion-tab-bar slot="bottom" >
<ion-tab-button tab="tab1">
<ion-icon name="desktop"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="person"></ion-icon>
<ion-label>Tab Two</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="send"></ion-icon>
<ion-label>Tab Three</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
表三
表二
表三
将其添加到选项卡.page.ts
ngOnInit() {
let content = document.querySelector('ion-content');
content.scrollEvents = true;
content.addEventListener('ionScrollStart', () => {
document.querySelector('ion-tab-bar').style.display = 'none';
});
content.addEventListener('ionScrollEnd', () => {
document.querySelector('ion-tab-bar').style.display = 'flex';
});
}
这就可以了……是的,它可以工作,但有一个bug,当滚动在屏幕中间时,屏幕开始自动上下滚动,所以看起来会闪烁。可能,这是主要的方法,我建议你玩一些游戏,比如:根据你的应用程序添加
fadein
fadeout
或者一些settimeout
以获得小延迟等。很难想象那里到底发生了什么。