离子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> 绝对不能在< ion-scroll style ="width:100％; height:100vh"scrollY =" true> ，至少适用于以下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 的< ion-scroll> 区域内，需要向上滚动到顶部，直到下一个无穷大滚动事件可以被触发. 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.

如果您可以使用完全可滚动的< ion-content> 并在< ion-list> 中有足够的帖子才能到达无限滚动<一个href ="https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/#input-properties" rel ="nofollow noreferrer">阈值距离，您可以删除<ion-scroll> 完全

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屋！