离子 3 无限滚动在内容滚动到顶部然后底部之前不起作用

Question

I am trying to load some more data in ionic 3 project. The infinite scroll is working only for the first time. And then it is stop working until the page scroll to top and then bottom.

Here is my code

HTML

<ion-content>
    <ion-scroll style="width:100%;height:100vh" scrollY="true">
        <ion-list *ngIf="posts.length>0">
            <button *ngFor="let post of posts" ion-item>
        <ion-thumbnail item-start>
            <img [src]="getPostImage(post)">
        </ion-thumbnail>
        <h2>{{ post.title.rendered }}</h2>
    </button>
        </ion-list>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
            <ion-infinite-scroll-content loadingText="Loading..."></ion-infinite-scroll-content>
        </ion-infinite-scroll>
    </ion-scroll>
</ion-content>

TypeScript

doInfinite(infiniteScroll) {
    this.getCategoryPosts(infiniteScroll);
}

getCategoryPosts(infiniteScroll=null){
       this.api.getCategoryPosts({
        id : this.topic.id,
        limit : this.limit,
        page:this.page,
        success:(posts)=>{
          this.zone.run(()=>{
            if(this.page >1){
              this.posts = this.posts.concat(posts);
            }else{
              this.posts = posts;
            }
              this.page++;
              if(infiniteScroll!=null)
                  infiniteScroll.complete();
          });

        },
        error:(error)=>{
          console.log(error);
        }
      });

  }

Answer 1

<ion-infinite-scroll> does definitely not work well inside <ion-scroll style="width:100%;height:100vh" scrollY="true"> , at least for the following Ionic 3 versions:

$ ionic info

cli packages: (./node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.9.2

Within the <ion-scroll> area of height 100vh it is required to scroll upwards to the top, before the next infinite scroll event can be triggered. Other values for height result in the same problem.

My best guess is, that the required height setting for the <ion-scroll> area conflicts with content size changes from the added infinite scroll items.

If you can live with a fully scrollable <ion-content> and have enough post items in your <ion-list> for reaching the infinite scroll threshold distance you can remove <ion-scroll> completely.

This was the only solution, that worked for me!

Answer 2

I found another solution that works if you don't want a list the full height (100vh) of the screen. Set the height of the <ion-scroll> to say 70vh and then on every successful infinite scroll, when new items are added to the list, add 4vh to the height of the <ion-scroll> element.

So with a:

 <ion-scroll id="list-scroll" style="height: 70vh">

Then once the new items are loaded by your component:

 scrollHeight += 4; document.getElementById('list-scroll').setAttribute('style', 'height:' + scrollHeight + 'vh');

It doesn't seem to matter how tall you make the <ion-scroll>