Question

我正在尝试在离子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>

打字稿

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>在<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

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

我最好的猜测是，height区域所需的高度设置与添加的无限滚动项目的内容大小更改冲突。

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

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

Answer 2

如果您不希望列表显示屏幕的整个高度（100vh），我找到了另一种解决方案。将<ion-scroll>的高度设置为70vh，然后设置每个成功的无限滚动，当新项目添加到列表中时，将4vh添加到<ion-scroll>的高度元件。

所以用：

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

然后，当您的组件加载新项目时：

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

<ion-scroll>

的高度似乎并不重要

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

2 个答案: