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