ionic4底部Tab居中圆形凸出按钮
先前写过一篇文章：
里面很简单地就实现了，那在ionic4中又是如何实现呢？也是很简单的。
实现
html部分：
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="today"></ion-icon>
<ion-label>运输信息</ion-label>
</ion-tab-button>
<ion-tab-button hidden>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="subway"></ion-icon>
<ion-label>开始运输</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tab-button tab="tab2" class="center-tab">
<ion-icon name="barcode"></ion-icon>
</ion-tab-button>
</ion-tabs>样式部分：
ion-tab-button.center-tab{
position: absolute;;
overflow: visible;
text-align: center;
height: 96px;
width: 96px;
left: 0;
right: 0;
margin: auto;
bottom: -14px;
z-index: 99999;
ion-icon{
padding: 6px;
width: 40px;
height: 40px;
line-height: 40px;
color: var(--ion-color-white, #fff);
background-color: var(--ion-color-primary, #9b7af3);
border-radius:50%;
border:5px solid #fff;
box-shadow:0 -2px 3px rgba(100,100,100,.4);
}
}这样就大功告成了！看下效果：
image.png
说明
留意html里面有这么一部分：
<ion-tab-button hidden>
</ion-tab-button>这是用来占位的，理论上应该给它写样式实现圆形凸出效果，但是它会被约束在父元素上，高度溢出不好操作，所以改为仅做占位使用，额外的用另一个<ion-tab-button>覆盖其上。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.07.15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录