Nieskończone uruchamianie jonowo-przewijane-przewijanie bardzo rzadko

Question

Próbuję uzyskać ionInfiniteScroll do pracy - już dostałem go do pracy w kilku innych miejscach w mojej aplikacji, a ta strona jest właściwie prawie identyczna z inną stroną, na której działa dobrze . Kiedy przewijam, nic się nie dzieje, bez grafiku ładującego. Mam komunikat konsoli bezpośrednio wewnątrz mojej metody doInfinite i nigdy nie wykonuje ... więc kod doInfinite nigdy nie jest wykonywany. Myślę może coś jest nie tak ze strukturą html ponieważ metoda nie wykonuje:

<ion-content no-padding> 
    <div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"--> 

    ... 

    <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of promotions" no-padding> 
     <div class="feedtoptextcontainer"> 
     <!--<div class="imageparent"> 
      <img class="postprofilepic" src="{{a.url}}"> 
     </div>--> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
     </div> 
     <h3 class="promotitle">{{a.title}}</h3> 
     <div class="desccontainer"> 
      <h4 class="deal">{{a.caption}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content 
     loadingSpinner="bubbles" 
     loadingText="Loading more data..."> 
    </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
    </div> 

    ... 

    <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item> 
</div> 

doInfinite kod metoda:

doInfinite(infiniteScroll) { 
    console.log("in doinfinite promotionsssssss"); 
    setTimeout(() => { 
     console.log('Begin async operation'); 
     /*console.log(this.content.directionY + "  upupupupupupu********"); 
     if(this.content.directionY == 'up') { 
     this.show = false 
     } 
     else { 
     this.show = true; 
     }*/ 

     console.log(this.startAtKey1 + "  before %%^&^&^% start at"); 
     this.list2 = this.af.list('/promotions', { 
     query: { 
     orderByKey: true, 
     endAt: this.startAtKey1, 
     limitToLast: 11 
     }}); 

     this.subscription11 = this.list2.subscribe(items => { 
      let x = 0; 
      this.lastKey1 = this.startAtKey1; 
      items.forEach(item => { 


      let storageRef = firebase.storage().ref().child('/settings/' + item.customMetadata.username + '/profilepicture.png'); 

      storageRef.getDownloadURL().then(url => { 
       console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!"); 
       item.customMetadata.picURL = url; 
      }).catch((e) => { 
       console.log("in caught url !!!!!!!$$$$$$$!!"); 
       item.customMetadata.picURL = 'assets/blankprof.png'; 
      }); 

      if(this.startAtKey1 !== item.$key && this.lastKey1 !== item.$key) { 
       console.log(this.startAtKey1 + " :startAtKey1 before 4444444  item key:  " + item.$key); 
       this.promotions.push(item.customMetadata); //unshift?************** 
      } 

      if(x == 0) { 
       this.startAtKey1 = item.$key; 
      } 

      x++; 
      });   

     }) 

     infiniteScroll.complete(); 

    }, 500); 
    } 

UPDATE

myślę inną ważną rzeczą, na którą warto zwrócić uwagę, jest to, że używam 5 różnych list, które wyglądają jak ta poniżej ... wszystko na tej samej stronie (dodałem tylko 2 poniżej - to było to, z czym ostatnio testowałem) . Gdzie w kodzie znajduje się ..., to są 4 listy podobne do tych, które widzisz powyżej. Są one ujęte w <div> jest jak ten powyżej - i żaden z nich nigdy nie są wyświetlane w tym samym czasie - Myślę, że powinienem pisać całe <ion-content> tylko okrywać rzeczy ingerencji ze sobą:

<ion-content no-padding> 
<div (swipeLeft)="swipeLeft()" (swipeRight)="toFull()"> <!--(swipeRight)="toProfile()"--> 



    <!--<ion-refresher (ionRefresh)="doRefresh($event)"> 
    <ion-refresher-content></ion-refresher-content> 
    </ion-refresher>--> 


    <div class ='availability contentone' #availability [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let z of availabilities" no-padding (tap)="presentProfileModal(z.salon, z.time)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{z.pic}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{z.salon}}</h4><br> 
      <h4 class="poststudio">{{z.time}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    </div> 

    <div class ='distance contentone' #distance [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let z of distances" no-padding (tap)="presentProfileModalDistance(z.salon)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{z.pic}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{z.salon}}</h4><br> 
      <h4 class="poststudio">{{z.distance}} mi</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    </div> 

    <div class ='ratings contentone' #ratings [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of rating ; let i = index" no-padding (tap)="presentProfileModalRatings(a.username)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{a.picURL}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
      <h4 class="poststudio">{{a.stars}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    </div> 

    <div class ='price contentone' #price [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of pricesArray" no-padding (tap)="presentProfileModalPrice(a.username)"> 
     <div class="feedtoptextcontainer"> 
     <div class="imageparent"> 
      <img class="postprofilepic" src="{{a.picURL}}"> 
     </div> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
      <h4 class="poststudio">{{a.price}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="doInfiniteP($event)"> 
    <ion-infinite-scroll-content 
     loadingSpinner="bubbles" 
     loadingText="Loading more data..."> 
    </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
    </div> 

    <div class ='weeklydeals contentone' #weeklydeals [@moveList]='moveState'> 
    <ion-list class="marginstatus" no-padding> 
    <ion-item *ngFor="let a of promotions" no-padding> 
     <div class="feedtoptextcontainer"> 
     <!--<div class="imageparent"> 
      <img class="postprofilepic" src="{{a.url}}"> 
     </div>--> 
     <div class="usernamecontainer"> 
      <h4 class="postusername">@{{a.username}}</h4><br> 
     </div> 
     <h3 class="promotitle">{{a.title}}</h3> 
     <div class="desccontainer"> 
      <h4 class="deal">{{a.caption}}</h4> 
     </div> 
     </div> 
     <!--<img class="imagepost" src="{{i}}">--> 
    </ion-item> 
    </ion-list> 
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
    <ion-infinite-scroll-content 
     loadingSpinner="bubbles" 
     loadingText="Loading more data..."> 
    </ion-infinite-scroll-content> 
    </ion-infinite-scroll> 
    </div> 

    <ion-item class="noavail" #noavail no-padding no-lines>NO RESULTS</ion-item> 
</div> 
</ion-content> 

Przełączam listy i wylogowuję za pomocą renderer, takich jak renderer.setElementStyle(el, 'display', 'none) or block.

Answer 1

Okazało się być sprzeczne css, które miałem na .scroll-content. Wydaje się, że po dodaniu css do .scroll-content, ion-infinite-scroll przestaje działać.