Ionic 3无限滚动在内容滚动到顶部和底部之前不起作用。

Question

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

这是我的代码：

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

  }

- shah

Answer 1

"

<ion-infinite-scroll>在<ion-scroll style="width:100%;height:100vh" scrollY="true">内不能很好地工作，至少对于以下Ionic 3版本：

"

$ 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

在高度为100vh的<ion-scroll>区域内，需要向上滚动到顶部，然后才能触发下一个无限滚动事件。对于height的其他值，也会出现同样的问题。

我最好的猜测是，<ion-scroll>区域所需的高度设置与添加的无限滚动项导致的内容大小变化发生冲突。

如果您可以接受完全可滚动的<ion-content>并且在<ion-list>中具有足够的帖子以达到无限滚动阈值距离，则可以完全删除<ion-scroll>。

这是唯一对我有效的解决方案！

- Marvin

Answer 2

如果你不想要一個完整高度（100vh）的列表，我找到了另一個解決方案。將<ion-scroll>的高度設置為70vh，然後在每次成功無限滾動時，當新項目被添加到列表中，將<ion-scroll>元素的高度增加4vh。

所以有：

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

然后一旦您的组件加载了新项目：

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

无论您将 <ion-scroll> 设为多高，似乎都没有关系。

- Daryl Johnson