组件内的列表滚动不起作用答案

【问题标题】：Scroll of a list inside a component does not work组件内的列表滚动不起作用
【发布时间】：2019-09-01 02:16:17
【问题描述】：

我创建了一个通用列表（一个组件）以在我的所有页面中使用，但滚动不起作用。

主页面：

<ion-header>
<app-generic-menu [leftMenu]="'left-menu'"
                  [rightMenu]="'client-menu'"
                  [isSelectionMode]="isSelectionMode()"
                  [pageTitle]="'Clientes'"
                  [topicReload]="'client-list:reload'"
                  (valueToSearch)="inputShearchBox = $event">
</app-generic-menu>
</ion-header>

<ion-content>
<app-generic-list [array]="arrayClients"
                  [label1Row1]="'id'"
                  [label2Row1]="'social_reason_name'"
                  [label1Row2]="'document'"
                  [pageToGo]="'/new-client'"
                  [icon]="'person'"
                  [pipe]="documentPipe"
                  [selectedObjects]="selectedClients"
                  (selectedObjectsEvent)="selectedClients = $event">
</app-generic-list>
</ion-content>

这是我的组件（app-generic-list）：

<ion-list>
<ion-item *ngFor="let x of array; trackBy: trackByFn" (press)="onLongPressObject(x)"
          (tap)="isSelectionMode() ? onLongPressObject(x) : showObject(x)"
          [ngClass]="{'selected-background': selectedObjects.indexOf(x) >= 0}">
    <ion-icon name="checkmark-circle" slot="start" class="floating-icon" style="color: #43A047;"
              *ngIf="selectedObjects.indexOf(x) >= 0"></ion-icon>
    <ion-icon slot="start" name="{{[icon]}}"></ion-icon>
    <ion-grid>
        <ion-row>
            <ion-label>{{x[label1Row1]}} - {{x[label2Row1]}}</ion-label>
        </ion-row>
        <ion-row>
            <p>{{x[label1Row2] | genericPipe : pipe:[]}}</p>
        </ion-row>
    </ion-grid>
</ion-item>
</ion-list>

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button [routerLink]="pageToGo" routerDirection="forward">
    <ion-icon name="add"></ion-icon>
</ion-fab-button>
</ion-fab>

我在数组中有 10 个元素，但只有 9 个出现，我无法滚动页面，这仅发生在组件中，ion-content 中有一个普通列表，滚动有效。

在子组件中滚动工作是否需要任何配置？

这是应用程序的外观：

还有一项，但我无法滚动。

【问题讨论】：

标签： html angular typescript ionic-framework ionic4

【解决方案1】：

您需要在列表中添加 margin-bottom 以考虑选项卡部分/页脚的大小，并且您可能需要手动添加 ion-content 的滚动行为，参考：https://ionicframework.com/docs/api/content#usage

<ion-content[scrollY]="true"></ion-content>

【讨论】：