1

我正在使用Ionic 4并使用 Tabs 布局。

我必须设计标签项目,如

在此处输入图像描述

为此, 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 值但没有运气。

在此处输入图像描述

4

1 回答 1

0

由于页脚高度,圆形图像被剪切。所以解决了这个问题如下

  1. 增加页脚高度
  2. 减小圆形图像大小。
于 2019-04-15T09:04:43.170 回答