Ionic 的无限滚动无法正常工作 - 绑定到窗口

Question

这不起作用的原因是，当用户在 div 内滚动时，不会发生任何事情，因为它没有绑定到窗口。如果窗口是可滚动的，则无限滚动效果很好，但是，这不是我需要的。它所绑定的窗口是滚动内容类，作为 ion-content 标签的子级。 ionicscroll 资源

HTML

<ion-content>

   <div class="wrapper">
       <ion-list>
               <ion-item *ngFor="let user of users">
                <ion-avatar item-start>
                 <img src="{{user.avatar}}">
                   </ion-avatar>
                  <h2>{{user.first_name}} {{user.last_name}}</h2>
                  </ion-item>
       </ion-list>

       <ion-infinite-scroll (ionInfinite)="doInfinitetwo($event)" *ngIf="page < totalPage">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
       </ion-infinite-scroll>

   </div>
</ion-content

CSS

.scroll-content{ overflow: hidden }

.wrapper{height: calc(100vh - 299px);
                overflow-y:auto;}

Answer 1

尝试改变你的

.wrapper {
    height: calc(100vh - 299px);
    overflow-y: auto;
}

并尝试这样做

<ion-content>
    <ion-list>
        <ion-item *ngFor="let user of users">{{i}}</ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

并用于此离子无限滚动