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.
