Ionic 4:滚动时隐藏ion-tab-bar,就像LinkedIn应用一样 [英] Ionic 4 : Hide ion-tab-bar while scrolling, just like LinkedIn app
本文介绍了Ionic 4:滚动时隐藏ion-tab-bar,就像LinkedIn应用一样的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用默认的ion-tab-bar,其底部位置如LinkedIn应用程序中所示. 我想在滚动时隐藏标签栏,并在滚动停止时再次显示它.可以在LinkedIn应用程序中看到此功能.
I am using default ion-tab-bar with bottom placement as shown in the LinkedIn app. I want to hide the tab-bar while scrolling and show it again when scrolling stops. This feature can be seen in the LinkedIn app.
这是tabs.page.html
Here is tabs.page.html
<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>
推荐答案
将此添加到tab.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';
});
}
这可以解决问题...
This will do the trick...
这篇关于Ionic 4:滚动时隐藏ion-tab-bar,就像LinkedIn应用一样的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文