Question

这里我获取数据我应用了无限滚动，但下面的滚动页面上没有显示的项目是我的代码：

html的

  <ion-list

* ngFor =＆＃34;让IfoData的infi;＆＃34; （点击）=＆＃34;项目（infi.Id）＆＃34; ＆GT;

   <ion-infinite-scroll-content>
<ion-item>

      <div >

        <p>{{infi.Cost}}</p>

      </div>

    </ion-item>

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


    doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 10; i++) {
        this.IfoData.push( this.IfoData.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }

实施本规范后，我只是获得了空白屏幕，数据并未显示在模板中，并且没有实现这个无限的滚动显示

Answer 1

无限滚动组件必须是离子内容中的最后一个元素。你应该尝试这样

<ion-content>
<ion-list>
<ion-item class="itm" *ngFor="let i of IData;"  (click)="goItem(i.Id,i.Name)">
      <ion-avatar item-start role="img">
        <img [src]="'data:image/png;base64,'+i.Image" style="width: 110px;">
      </ion-avatar>

      <div class="item-inner">
        <h2 class="_nme">{{i.Name}}</h2>
        <p class="_price">{{i.Cost}}</p>
        <ion-icon name="arrow-dropright"></ion-icon>
      </div>

    </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-content用于更改默认微调器并在无限滚动中添加文本

有关详细信息，请参阅docs

Answer 2

在离子内容

的最后放置无限滚动

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="expiry-month exp" name="card_exp_month" id="card_exp_month" required>
<input class="expiry-year exp" name="card_exp_year" id="card_exp_year" required><br />

<input type="text" name="curr_month" id="curr_month" value="6" />
<input type="text" name="curr_year" id="curr_year" value="18" />

<input type='button' class='btn btn-next btn-fill btn-rose btn-wd' name='next' value='Next' id="billing_nxtBtn" disabled/>

并在您的ts文件中 doInfinite（infiniteScroll）{ console.log（＆＃39;开始异步操作＆＃39;）;

<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
  <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

无法使用Ionic3使用无限滚动

2 个答案: