[英]ion-tabs scrolling inside ion-card element, instead of being fixed to bottom (Ionic 4)
问题 :
我已将ion-tab-bar的slot属性设置为“ bottom”,但是ion-tabs似乎将自身定位在ioncard元素内,并且在遍历ioncard内容以读取更多内容时,tabs滚动为内容。
我尝试使用CSS来固定ion-tabs的位置:固定,但是这样会使内容完全停止滚动(无法读取离子卡的所有内容)。
有人知道解决方法吗? 任何帮助表示赞赏,谢谢。
背景 :
问题的剪辑: https : //streamable.com/m650o
about.page.html:
<ion-content>
<ion-card class="aboutcard">
<ion-img src="assets/pic1.jpg"></ion-img>
<ion-card-header>
<ion-card-title>About Us</ion-card-title>
<ion-card-subtitle>BOUTIQUE SOLICITORS</ion-card-subtitle>
</ion-card-header>
<ion-card-content>BOUTIQUE Immigration Lawyers of London have
‘years of specialist Legal experience at your disposal’
<br>
Established in 1998 as a niche human rights firm – we have a trusted record of excellent service. BOUTIQUE are
frequently recommended by a long list of happy clients.
We are passionate about our work and dedicated to achieving life-changing results.
<br>
OUR PROMISE
<br>
“If you come to BOUTIQUE, you will get the result you want.
If there is a way, we find it and do it for you.
If there is no way we tell you, and don’t waste your time.
Where there is a way, we will deliver.”
Lawrence Lupin – Founding Director
</ion-card-content>
</ion-card>
<ion-tabs slot="fixed">
<ion-tab-bar slot="bottom">
<ion-tab-button class="activeTab">
<ion-icon name="information-circle-outline"></ion-icon>
<ion-label>About Us</ion-label>
</ion-tab-button>
<ion-tab-button (click)="dashboard()" class="adjustHeight">
<ion-icon name="home"></ion-icon>
<ion-label>Dashboard</ion-label>
</ion-tab-button>
<ion-tab-button (click)="contact()" class="adjustHeight">
<ion-icon name="contacts"></ion-icon>
<ion-label>Contact Us</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
更新:修复了此问题。
要解决此问题,需要将离子卡放在离子含量之外,然后将其包裹在离子工具栏中。
通过这种方式,离子选项卡与内容分离,并将其包装到离子工具栏中,可以减少“点击区域”,因为离子选项卡“点击区域”占据了整个页面,并可能导致其他问题,例如由于(点击)事件未触发。
幸好看到这一点的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.