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

qyuhtwio  于 2023-09-28  发布在  Ionic
关注(0)|答案(1)|浏览(142)

这不起作用的原因是,当用户在div内滚动时,什么也没有发生,因为它没有绑定到窗口。如果窗口是可滚动的,无限滚动工作完美,然而,这不是我需要的。它所绑定的窗口是scroll content类,是ion-content标记的子级。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;}
4dbbbstv

4dbbbstv1#

试图改变你

.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

相关问题