设置离子选项卡的样式

Question

我正在使用 Ionic 4 ，并使用“标签”布局。

我必须设计选项卡项

为此，tabs.page.html就像

<ion-tabs>

    <ion-tab-bar slot="bottom" color="primary">
        ...

        <!-- center button with round border -->
        <ion-tab-button tab="ride" class="tab-btn-ride">
            <ion-icon name="bicycle"></ion-icon>
            <ion-label>Ride</ion-label>
        </ion-tab-button>

        ...

</ion-tabs>

要使按钮变圆，这是css

.tab-btn-ride {
  width: 4rem !important;
  height: 5rem;
  border-radius: 50% 50%;
  box-shadow: 0 0 0 1.5pt #ff9823;
  margin-bottom: 2rem;
  max-width: 5rem;
  z-index: 10;
  border: 3px solid white;
}

在开发过程中，这在浏览器中看起来不错（上图）。但是生成apk后，它看起来像Android设备中的下图。上部被裁剪或隐藏在页面视图下方。

我尝试增加z-index值，但是没有运气。

Answer 1

由于页脚高度而剪切的圆形图像。因此解决了以下问题

1. 增加页脚高度
2. 缩小的圆形图像大小。