在内容滚动到顶部然后底部之前，离子 3 无限滚动不起作用 [英] ionic 3 infinite scroll is not working until content scroll to top and then bottom

问题描述

我正在尝试在 ionic 3 项目中加载更多数据.无限滚动只是第一次工作.然后它停止工作，直到页面滚动到顶部然后底部.

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.

这是我的代码

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

  }

推荐答案

<ion-infinite-scroll> 在 ，至少对于以下 Ionic 3 版本:

<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

在 height 100vh 的 区域内，需要向上滚动到顶部，在下一个无限之前可以触发滚动事件.height 的其他值会导致相同的问题.

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.

我的最佳猜测是，<ion-scroll> 区域所需的高度设置与添加的无限滚动项的内容大小更改冲突.

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!

这篇关于在内容滚动到顶部然后底部之前，离子 3 无限滚动不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！