html - ion-infinite-scroll 向上滚动时触发 - Ionic

Question

我在我的 html 中使用 ion-infinite-scroll 是这样的:

<div class ='contentone' #contentone [@moveList]='moveState'>
   <ion-list class="marginstatus" no-padding>
     <ion-item *ngFor="let i of items" no-padding no-lines>
      <div class="feedtoptextcontainer">
        <div class="imageparent">
          <img class="postprofilepic" src="{{i.url}}">
        </div>
        <div class="usernamecontainer">
          <h4 class="postusername">{{i.username}}</h4><br>
          <h4 class="poststudio">Ed's Studio</h4>
        </div>
        <div class="postprofilelink">
          <div class="book">{{i.title}}<!--</div><div style="display: inline-block">@edbundyhair--></div>
        </div>
      </div>
      <img class="imagepost" src="{{i.url}}">
      <div class='caption'>
        {{i.caption}}
      </div>
      <br>
     </ion-item> 
   </ion-list>
   <ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite())">
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data..."
        threshold="1%">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>

我的 Controller 代码如下所示:

doInfinite(): Promise<any> {
    console.log('Begin async operation');

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.list = this.af.list('/promos', {
        query: {
          orderByKey: true,
          startAt: this.startAtKey,
        }});

        this.list.subscribe(items => { 
          items.forEach(item => {
            console.log(JSON.stringify(item.customMetadata));
            console.log(this.startAtKey + "            " + item.$key);
            if(this.startAtKey == item.$key) {
              //
            }
            else {
              this.startAtKey = item.$key;
              this.items.push(item.customMetadata);
            }

          });

          resolve();              
        })

      }, 500);
    })
  }

有一件事很奇怪，不久之前一切正常，但为了让无限滚动显示出来，我必须像这样添加 css:

    ion-infinite-scroll {
        position: relative;
        bottom: 30px;
        background-color: white;
    }

问题是，当我向上滚动时，doInfinite 方法只应在您向下滚动时触发。我正在使用 ionic 刷新器来处理向上滚动。感谢您的帮助，谢谢。

Answer 1

我遇到了类似的问题并实现了如下解决方法:

在类中导入ViewChild & Content如下

import { ViewChild } from '@angular/core';
import {Content } from 'ionic-angular';

然后声明内容——

export class YourClass {
  //
  @ViewChild(Content)
  content: Content;

// variables to check scrolling -
private lastScrollTop: number = 0;
private direction: string = "";


ngAfterViewInit() {
    //
    this.content.ionScrollEnd.subscribe((data) => {
      //
      let currentScrollTop = data.scrollTop;
      if(currentScrollTop > this.lastScrollTop){
        this.direction = 'down';
      }else if(currentScrollTop < this.lastScrollTop){
        this.direction = 'up';
      }
      //
      this.lastScrollTop = currentScrollTop;

      //console.log(this.direction);
    })
  }


// and then - 

doInfinite(infiniteScroll) {
   setTimeout(() => {         
      //
      if(this.direction == 'down'){
        // do your job here
      }
      infiniteScroll.complete();

    }, 500);
  }