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

Posted 2023-03-15

【中文标题】ion-infinite-scroll 向上滚动时触发 - Ionic

【英文标题】：ion-infinite-scroll fires when scrolling up - Ionic

【发布时间】：2017-08-01 01:09:22

【问题描述】：

我在我的 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 方法只会在您向下滚动时触发。我正在使用离子刷新器来处理向上滚动。感谢您的帮助，谢谢。

【参考方案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);
  

【讨论】：

我应该把我的内容视图子放在哪里？在离子含量中？

这解决了我的问题。但是当我需要再次加载时，我不得不去顶部和底部加载另一个数据。

@KnowledgeSeeker 我也面临同样的问题，但我相信您实施错误。使用 而不是