0

我正在尝试在我的 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 中的内容。

4

1 回答 1

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/

于 2017-10-26T11:49:34.337 回答