Question

我正在使用 Ionic 3 开发一个应用，并在infiniteScroll和中使用。我在 github 中甚至在 SO 中都看到了常见问题。但是大多数都没有解决方案。

问题是当我收到 API 请求时，页面加载完毕并呈现了从后端分页的所有数据。现在，当我滚动到页面底部时，有了infiniteScroll event。但是问题在于，它仅触发一次并加载我的数据。如果要加载新数据，则必须返回到内容顶部，然后再次向下以加载一些数据。

这是我的打字稿文件下面的代码：

我在native element

内使用viewChild来滚动 Ionic 的 Scroll <ion-slide>

以下是我的 html 的结构：

<ion-slide *ngIf="!preloader">
      <ion-scroll #scrollWeb scrollY="true">

<! -- Content Part for loop of an array with data from a server -->

<!-- Load more for following -->
        <ion-infinite-scroll *ngIf="selectedSegment == 'first' && !pulling" (ionInfinite)="loadMorePost($event)">
          <ion-infinite-scroll-content
          loadingSpinner="crescent"
          loadingText="Loading more post..."
          >
        </ion-infinite-scroll-content>
        </ion-infinite-scroll>
        <small *ngIf="noMorePostToShowForExplore">No more post to show</small>
      </ion-scroll>
    </ion-slide>

和打字稿

loadMorePost(infiniteScroll? :any) {
    console.log('Async operation begun')
      setTimeout(() => {
        if (this.selectedSegment == 'first') this.loadMoreExplore()
        else this.loadMoreFollowing()
        infiniteScroll.complete(); 
      }, 1000);
  }

正如我之前对viewChild所说的那样，我试图触发y轴滚动，并且仅在页面最底部时才允许刷新。哪个仍然无法正常工作。

this.scrollWeb.addScrollEventListener((ev) => {
          if ((ev.target.offsetHeight + ev.target.scrollTop) >= ev.target.scrollHeight) {
            // this.loadMorePost(InfiniteScroll)
            console.log('Loading post')
          }
        })

感谢有人可以帮助您。预先感谢。

Ionic 3 Infinite Scroll发射事件只会发射一次

0 个答案: