在离子应用程序上与iOs的部分边界

Question

在我的公司，我们正在制作Ionic3应用程序。在其中一个页面中，我们在几个选项卡中显示排名（每个选项卡，显示不同的排名），以及我们显示活动选项卡的方式，是为活动标签标题设置不同的border-bottom。 / p>

这在Android设备上完美运行，但在iOs设备上，如果选项卡标题的一部分离开屏幕（它具有overflow-x: scroll;属性设置），则该部分在滚动时不会获得边框。用图片更好地解释：

我试过在论坛和堆栈上寻找，但我没有看到任何有相同问题或类似问题的人。有什么想法吗？

以防万一，这是视图的代码：

<back-button></back-button>

<ion-content>

    <login-image></login-image>

    <div>
        <h1>{{'LOGIN.TITLE' | translate }}</h1>
        <h2>{{'LOGIN.SUBTITLE' | translate}}</h2>
    </div>

  <form class="form" [formGroup]="loginForm">

    <ion-item>
      <ion-label>
        <ion-icon name="ios-mail-outline"></ion-icon>
      </ion-label>
      <ion-input type="text" autocapitalize="off" formControlName="mail" placeholder="{{ 'LOGIN.MAIL' | translate }}"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>
        <ion-icon name="key"></ion-icon>
      </ion-label>
      <ion-input type="{{visible? 'text' : 'password'}}" formControlName="password" placeholder="{{'LOGIN.PASSWORD' | translate}}"></ion-input>
      <span class="eyeButton" item-right (click)="changeVisibility()">
        <ion-icon name="{{visible? 'eye': 'eye-off'}}"></ion-icon>
      </span>
    </ion-item>

    <div class="terms">
      <label class="switch">
        <input type="checkbox" formControlName="termsAccepted">
        <span class="slider"></span>
      </label>

      <p (click)="showTerms()" [innerHtml]="'REGISTRATION.TERMS' | translate "></p>
    </div>

    <div class="bottom">
      <a class="passLink" (click)="goToChangePass()" track-event [event]="'loginpage_gotochangepass'">{{'LOGIN.PASSLINK' | translate}}</a>
      <button (click)="doLogin(loginForm)" [ngClass]="{'disabled': loginForm.invalid}" class="formButton" type="button" track-event [event]="'loginpage_dologin'">{{'LOGIN.NEXT' | translate}}</button>
    </div>

  </form>

</ion-content>

Answer 1

尝试使用离子离子头指令，例如

<ion-header no-border>
  <ion-navbar no-border>
    <ion-buttons left>
      <button ion-button>
        Left
      </button>
    <ion-buttons>
      <ion-title></ion-title>
    <ion-buttons end>
      <button ion-button>
        Right
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content>
</ion-content>

这有Android和ios屏幕的配置

我希望这有助于你