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>

我的控制器代码如下所示：

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方法时，只有当你向下滚动时才会触发它。我正在使用离子修复器来处理向上滚动。感谢帮助，谢谢。

Answer 1

我遇到了类似的问题，并实施了如下解决方法：

导入的ViewChild＆amp;课程内容如下

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);
  }

滚动向上时离子无限滚动 - 离子

1 个答案: