离子2 - 滚动底部的离子滚动火灾事件

Question

我有一个页面，我有一个可滚动的部分。但是我无法在离子滚动部分内实现无限滚动功能。我知道无限滚动适用于离子内容，但是当用户在离子滚动部分中滚动时，如何触发事件。

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

Answer 1

如果您或其他人仍在寻找答案，我会发布此信息。

就像你说的那样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>
...