Question

这不起作用的原因是当用户在div中滚动时，没有任何反应，因为它没有绑定到窗口。如果窗口是可滚动的，那么无限滚动可以完美地工作，但是，这不是我需要的。它所绑定的窗口是作为离子内容标记的子项的滚动内容类。 ionicscroll resource

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>

并使用此ion-infinite-scroll

离子的无限滚动无法正常工作 - 与窗户相连

1 个答案: