离子列表内的离子无限滚动

Question

我正在尝试在我的 ionic 3 应用程序中实现 ion-infinite-scroll。我需要在离子列表中实现它。我让我的滚动内容溢出：隐藏并使离子列表溢出-y：滚动。

我的 HTML 代码：

<ion-content fullscreen padding>
<ion-list>
    <ion-item *ngFor="let passanger of passangers" (click) = "gotoPassangerDetails(passanger.bookingNo)">
        <div class = "row">
            <div class = "col">{{passanger.lastName}}</div>
            <div class = "col">{{passanger.firstName}}</div>
        </div>
    </ion-item>
    <ion-infinite-scroll style="background-color: white" (ionInfinite)="doInfinite($event)" infinite-scroll-parent="true">
        <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..." position="top" ></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-list>

我的 CSS

page-customer-list {
.scroll-content {;
    height: -webkit-fill-available;
    overflow: hidden;
}

ion-content{
    .row{
        .col.center{
            text-align: center;
        }
        font-size: 14px;
    }

    ion-list{
        overflow-y: scroll;
        height: 75%;
    }
}}

我无法在 doInfinite 上获得触发器。如果我要删除溢出：隐藏在滚动内容中，它正在工作。但我的整个页面都在滚动。我只需要滚动 ion-list 中的内容。

Answer 1

如果你只想让你的列表滚动，用 ion-scroll 包裹你的 ion-list。要使您的列表垂直滚动，请将您的列表包裹在里面：-

<ion-scroll scrollY="true">
</ion-scroll>

查看以下链接了解更多信息：-

https://ionicframework.com/docs/api/components/scroll/Scroll/

编辑：- 试试下面的代码

<ion-content padding>
<ion-scroll scrollY="true">
  <ion-list>
    <ion-item *ngFor="let passanger of passangers" (click)="gotoPassangerDetails(passanger.bookingNo)">
      <div class="row">
        <div class="col">{{passanger.lastName}}</div>
        <div class="col">{{passanger.firstName}}</div>
      </div>
    </ion-item>
  </ion-list>

  <ion-infinite-scroll style="background-color: white" (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..." position="top"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-scroll>
</ion-content>

同时从您的 CSS 中删除所有代码。没必要。

查看以下链接以获取官方无限滚动示例：-

https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/