滚动时离子无限滚动触发 - 离子 [英] ion-infinite-scroll fires when scrolling up - Ionic

问题描述

 <$  ion-infinite-scroll  c $ c>< div class ='contentone'#contentone [@moveList] ='moveState'> 
< ion-list class =marginstatusno-padding> 
< ion-item * ngFor =let i of itemsno-padding no-lines> 
< div class =feedtoptextcontainer> 
< div class =imageparent> 
< img class =postprofilepicsrc ={{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 =imagepostsrc ={{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 =加载更多数据...
 threshold =1％> 
< / ion-infinite-scroll-content> 
< / ion-infinite-scroll> 
< / div> 
  

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

  doInfinite（）：Promise< any> {
 console.log（'Begin async operation'）; 
 
返回新的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：

pre $离子无限滚动{
位置：相对的;
bottom：30px;
背景颜色：白色;
}

问题是，当我向上滚动 doInfinite 方法会在您向下滚动时仅触发时触发。我正在使用离子复习器来处理滚动。感谢您的帮助。

解决方案

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

导入的ViewChild&该类中的内容如下：

 从'@ angular / core'导入{ViewChild}; 
从'ionic-angular'导入{Content}; 
  

然后宣布内容 -

  export class YourClass {
 // 
 @ViewChild（Content）
 content：Content; 
 
 //检查滚动的变量 -  
 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 ）; 
}）
} 
 
 
 //然后 -  
 
 doInfinite（infiniteScroll）{
 setTimeout（（ ）=> {
 // 
 if（this.direction =='down'）{
 //在这里做你的工作
} 
 infiniteScroll.complete ）; 
 
}，500）; 
} 
  

I am using ion-infinite-scroll in my html like this:

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

My controller code looks like this:

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

One thing that is weird is everything was working fine a little while ago, but to get the infinite-scroll to show up I had to add css like this:

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

The problem is that when I scroll up the doInfinite method fires when it is only supposed to fire when you are scrolling down. I am using the ion-refresher to handle scrolling up. Help is appreciated, thanks.

解决方案

I faced a similar issue and implemented an workaround as follows:

Imported ViewChild & Content in the class as follows

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

Then declared Content -

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

这篇关于滚动时离子无限滚动触发 - 离子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！