无限滚动不会在自定义组件内触发 - ionic 2

Question

我正在研究离子应用程序。我正在尝试在自定义组件中使用无限滚动项目，该组件包含一个带有两个列表的分段，这些列表根据用户的选择显示。

这是组件的代码：

 <ion-content *ngIf="show">

  <div no-margin no-padding style="color: rgba(25,94,97,0.98)" >
    <ion-segment style="color: rgba(25,94,97,0.98)" [(ngModel)]="chx">
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="most">
        MOST TRUSTED
      </ion-segment-button>
      <ion-segment-button style="color: rgba(25,94,97,0.98)" value="recent">
        LATEST
      </ion-segment-button>
    </ion-segment>
  </div>

  <div no-margin no-padding [ngSwitch]="chx">
    <ion-list  no-margin no-padding *ngSwitchCase="'most'">

      <post-card-most no-margin *ngFor="let post of mostTrusted" [post]="post"> </post-card-most>
      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollmost" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite2($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>

    </ion-list>


    <ion-list no-margin no-padding  *ngSwitchCase="'recent'">

      <page-post-card no-margin  *ngFor="let post of latestTrusted" [post]="post" [isNotif]=false [home]=false>
      </page-post-card>

      <ion-item no-border no-lines align-self-center style="align-content: center; text-decoration-color: grey" *ngIf="isscrollrecent" margin-top> <p style="text-align: center; color: grey"> No data to display... </p></ion-item>

      <ion-infinite-scroll  (ionInfinite)="doInfinite($event)" threshold="100px">
        <ion-infinite-scroll-content
          loadingSpinner="{{'BUBBLES' | translate}}"
          loadingText="{{'LOADING' | translate}}">
        </ion-infinite-scroll-content>

      </ion-infinite-scroll>
    </ion-list>

  </div>
</ion-content>

该组件在离子页面中使用如下：

    <ion-content no-padding>

  <topicsearch [show]="showresult"></topicsearch>   <!-- This is the custom component -->

  <div *ngIf="!showresult" >
  <ion-list  *ngFor="let top of topics">
    <ion-item (click)="topicsearchselected(top.label)" > {{top?.label}}</ion-item>
  </ion-list>
  </div>

</ion-content>

问题是在自定义组件中向下滚动时不会触发无限滚动。有人对此有解决方案吗？

Answer 1

您的组件使用 ion-content，其中包含另一个 ion-content。从组件中删除 ion-content。
并且 doInfinite 函数将在组件 ts.

中声明

无限滚动不会在自定义组件内触发 - ionic 2

Infinite-scroll doen’t fire inside a custom component - ionic 2

infinite-scroll

ionic-framework

ionic2

ionic3