Question

所以我想做的是在底部的一个小菜单，它弹出并显示项目列表。但是我的代码并没有真正起作用。可滚动的离子列表与页面末尾重叠。您可以在此图片的滚动条上看到以下内容： overflow

我想要的基本上是一个标签菜单，但仅占页面的x％以上。因此，如果没有一个按钮处于活动状态，则应该只有工具栏固定在页面底部。但是，一旦单击它，应会打开被单击的菜单。其中一个菜单是离子列表，该列表不适合屏幕（这是问题所在，因为未显示最后一项）。我删除了屏幕截图中的列表项。

模板：

<div id="menu">
<ion-toolbar id="menu_toolbar" no-border>
  <ion-button id="btn_upgrade" slot="start" (click)=btn_upgrade_click()>
      <ion-icon name="logo-euro"></ion-icon>
  </ion-button>

  <ion-button id="btn_info" slot="end" (click)=btn_info_click()>
      <ion-icon name="information-circle-outline"></ion-icon>
  </ion-button>
</ion-toolbar>
<ion-content>
<div id="menu_body">
  <div id="menu_info" *ngIf="show_info">
    NOTHING TO SEE HERE YET
    <ion-button (click)="clearData()">CLEAR ALL!</ion-button>
  </div>
  <div id="menu_upgrade" *ngIf="show_upgrade">
    <ion-list>
      <ion-item *ngFor="let upgrade of upgrades | keyvalue : sortOrder">
        <ion-label>
          {{upgrade.value.name}}
        </ion-label>
      </ion-item>
      <!--ToDo: find out why this is needed. Otherwise the last item of the list is "beyond" the page...-->
      <ion-item></ion-item>
    </ion-list> 
  </div>
</div>
</ion-content>

离子列表溢出页面结尾

0 个答案: