离子2 - 滚动底部的离子滚动火灾事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了离子2 - 滚动底部的离子滚动火灾事件相关的知识，希望对你有一定的参考价值。
我有一个页面，我有一个可滚动的部分。但是我无法在离子滚动部分内实现无限滚动功能。我知道无限滚动适用于离子内容，但是当用户在离子滚动部分中滚动时，如何触发事件。
<ion-content class="main-view">
<div class="overlay" tappable (click)="dismiss()">
</div>
<div (click)="CloseScreen()">
<ion-icon name="close" tappable class="close-modal"></ion-icon>
</div>
<div>
<div class="modal_content">
<ion-scroll scrollY="true" style="height:300px">
<ion-spinner class="loading-center" *ngIf="loadingCustomers"></ion-spinner>
<div class="customer-items">
<ion-item *ngFor="let customer of customersView.paginatedCustomers" tappable (click)="SelectCustomer(customer)">
<h6>
{{customer.BusinessName}}
</h6>
</ion-item>
</div>
<ion-infinite-scroll (ionInfinite)="LoadMoreCustomers($event)"> // NOT FIRING!
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-scroll>
....OTHER STUFF
</div>
</div>
</ion-content>
答案
如果您或其他人仍在寻找答案，我会发布此信息。
就像你说的那样ion-infinite-scroll只适用于ion-content，即使放在ion-scroll内也是如此。因此，如果您为ion-scoll添加一些边距并尝试滚动页面本身，您可以看到它触发。
但是，对于您的情况，您可能想尝试这样的事情：https://stackoverflow.com/a/42176764/4084776
如果要检查何时到达滚动的底部，可以添加虚拟元素并检查它是否位于滚动的底部附近。请参阅下面的示例。
...
@ViewChild(Scroll) ionScroll: Scroll;
@ViewChild("endOfScroll") endOfScroll: ElementRef;
updating: Boolean = false;
private threshold: number = 0.01; //1% This is similar to ion-infinite-scroll threshold
...
ionViewDidLoad() {
this.ionScroll.addScrollEventListener(this.scrollHandler.bind(this));
}
...
scrollHandler(evenman){
let endOfScroll = this.endOfScroll.nativeElement.getBoundingClientRect();
let ionScroll = this.ionScroll._scrollContent.nativeElement.getBoundingClientRect();
let clearance = 1 - ionScroll.bottom/endOfScroll.bottom;
if(clearance <= this.threshold){
this.updating = true;
// DO your work here
console.log(JSON.stringify({fen: endOfScroll.bottom, lis: ionScroll.bottom}));
this.updating = false;
}
}
......
<ion-scroll scrollY="true">
<ion-list>
<ion-item-sliding *ngFor="let machann of lisMachann.lisMachann let endeks = index" [class.active]="endeks == endeksKlik">
<ion-item (click)="ouveFenet(endeks)">
...
</ion-item>
<ion-item-options side="left">
...
</ion-item-options>
</ion-item-sliding>
<ion-item *ngIf="updating">
<ion-spinner class="loading-center"></ion-spinner>
</ion-item>
</ion-list>
<div #endOfScroll></div>
</ion-scroll>
...以上是关于离子2 - 滚动底部的离子滚动火灾事件的主要内容，如果未能解决你的问题，请参考以下文章