Ionic 应用程序上与 iOs 的部分边框答案

【问题标题】：Partial border with iOs on Ionic appIonic 应用程序上与 iOs 的部分边框
【发布时间】：2018-08-23 23:41:19
【问题描述】：

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

这在 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>

【问题讨论】：

做一些基于平台的编码，你应该自己做。检查平台 ios 类，然后在其中使用代码。
你是否使用 ion-header 作为标题？
@jorghe94 实际上，我们根本不使用 ion-header。我已经为所述视图添加了代码，以防万一（后退按钮是添加 FB 按钮以返回左上角的组件）
你可以尝试使用离子头吗？这具有与通知栏相关的 android 和 ios 屏幕配置，此外您还可以配置此按钮（左/后和右）。我已经添加了一个答案给你举个例子

标签： ios css ionic2 ionic3

【解决方案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屏幕的配置

希望对你有帮助

【讨论】：