Question

我使用ion-grid / ion-row / ion-col来定义表单，它运行正常。在此表单的顶部，我还使用ion-segment来实现一些标签：

<ion-header no-border>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title class="home-toolbar-background">Mes sports</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <div padding *ngIf="items && items.length > 0">
    <ion-segment text-center [(ngModel)]="item" 
                 (ngModelChange)="onItemChange($event)">
      <ion-segment-button value="item1" *ngIf="hasSport('item1')">
        Item1
      </ion-segment-button>
      <ion-segment-button value="item2" *ngIf="hasSport('item2')">
        Item2
      </ion-segment-button>
      <ion-segment-button value="item3" *ngIf="hasSport('item3')">
        Item3
      </ion-segment-button>
      (...)
    </ion-segment>
  </div>

  <ion-grid>
    ...
  </ion-grid>
</ion-content>

它在开发模式下在浏览器中工作正常，但在IonicView中，我无法通过滚动到达表单的末尾。看起来屏幕的高度没有标签块的高度。

请注意，此屏幕是

的一部分

<ion-tabs>
  <ion-tab tabIcon="pricetag" tabTitle="Tab1" [root]="tab1"></ion-tab>
  <ion-tab tabIcon="calendar" tabTitle="Tab2" [root]="tab2"></ion-tab>
  <ion-tab tabIcon="walk" tabTitle="Items" [root]="tabItems"></ion-tab> <--------------
  <ion-tab tabIcon="person" tabTitle="Tab3" [root]="tab3"></ion-tab>
  <ion-tab tabIcon="chatboxes" tabTitle="Notifs" [root]="tabNotifications"></ion-tab>
</ion-tabs>

非常感谢你的帮助！

Answer 1

我也面临类似的问题，看起来可能很傻，但它可以解决问题。

在你的离子含量结束时<div padding></div>

<ion-content padding>
  <div padding *ngIf="items && items.length > 0">
    <ion-segment text-center [(ngModel)]="item" 
                 (ngModelChange)="onItemChange($event)">
      <ion-segment-button value="item1" *ngIf="hasSport('item1')">
        Item1
      </ion-segment-button>
      <ion-segment-button value="item2" *ngIf="hasSport('item2')">
        Item2
      </ion-segment-button>
      <ion-segment-button value="item3" *ngIf="hasSport('item3')">
        Item3
      </ion-segment-button>
      (...)
    </ion-segment>
  </div>

  <ion-grid>
    ...
  </ion-grid>

<div padding></div>
<div padding></div>
</ion-content>

.scroll-content被占用直到屏幕底部。并且选项卡位于.scroll-content上方注意：选项卡不是受尊重Screen的一部分。为什么我们面对这个问题只会在屏幕底部解决问题min-height:58px将解决它？ / p>

在屏幕中使用离子段时无法看到屏幕底部

1 个答案: