Question

我正在尝试在离子3应用程序中实现离子无限滚动。我需要在离子列表中实现它。我让我的滚动内容溢出：隐藏并使离子列表溢出-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上获得触发器。如果我删除溢出：隐藏在scroll -content中它正在工作。但我的整个页面都在滚动。我只需要滚动离子列表中的内容。

Answer 1

如果您只想滚动列表，请使用离子滚动包裹离子列表。要使列表垂直滚动，请将列表包装在内： -

<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/

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

1 个答案: