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

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

1 个答案: