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

【问题标题】：ionic 3 infinite scroll is not working until content scroll to top and then bottom在内容滚动到顶部然后底部之前，离子 3 无限滚动不起作用
【发布时间】：2018-03-10 22:05:12
【问题描述】：

我正在尝试在 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);
        }
      });

  }

【问题讨论】：

标签： angular typescript ionic3 infinite-scroll

【解决方案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

在height100vh的<ion-scroll>区域内，需要向上滚动到顶部，才能触发下一个无限滚动事件。 height 的其他值会导致同样的问题。

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

如果您可以使用完全可滚动的 <ion-content> 并且在您的 <ion-list> 中有足够的帖子项目以达到无限滚动 threshold distance 您可以完全删除 <ion-scroll>。

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

【讨论】：

【解决方案2】：

如果您不想列出屏幕的全高 (100vh)，我找到了另一种可行的解决方案。将<ion-scroll> 的高度设置为70vh，然后在每次成功无限滚动时，将新项目添加到列表中时，将4vh 添加到<ion-scroll> 元素的高度。

所以有一个：

&lt;ion-scroll id="list-scroll" style="height: 70vh"&gt;

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

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

<ion-scroll> 的高度似乎并不重要

【讨论】：