Ionic2 infinite scroll

Ionic Framework ionic-v3
21

hi @mhartington, i’m still having an issue with the infinite-scroll-content. it is not being displayed.

html:

<ion-content id="listScroll">
 <ion-list [style.direction]="direction" >   
     <ion-item  *ngFor="let item of selectedEntItems | objToIterable;let ind=index" >
         <!--List item header-->
         <!--List item content-->
    </ion-item>    
 </ion-list>
 <ion-infinite-scroll *ngIf="loadMoreData()==true" (ionInfinite)="doInfinite($event)"> 
   <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
 </ion-infinite-scroll>
</ion-content>

ts:

doInfinite(infiniteScroll) {

        console.log('Begin async operation');
            let iterablePipe = new ObjToIterable();
            let arrRecords = iterablePipe.transform(this.selectedEntItems);
            let recordsCount = arrRecords.length + 1;
            this.appService.getRows(recordsCount, "").subscribe(
                result =>
                {
                    let arrResult =  iterablePipe.transform(result);
                    if (arrResult.length > 0) {
                        for (let item of arrResult) { 
                            arrRecords.push(item);
                        }
                        this.selectedEntItems = arrRecords;
                    } else
                        this.appService.loadMoreData = false;
                });

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

Please fork my repo and use that as a base.
[style.direction]="direction" should not be needed at all.

23

I got the first problem too…

I’m using the infinite scroll code from here

I realize my app not showing the <ion-infinite-scroll-content> and fired infinite function multiple times… Anyone already have the solution ?

24

I stopped the multiple fires by doing:

if(data.status === "success") {

                this.page = data.page+1;

                for(let place of data.results) {

                    this.places.push(place);

                }

                resolve(true);

                infiniteScroll.complete();


            } else {

                this.hasMoreData = false;

                infiniteScroll.enable(false);

            }

Note the infiniteScroll.enable(false);

1 Like
25

Haha! Here is my production code. Note I have a canLoadMore property in the class. I disable the infiniteScroll if the server returned nothing.

import { Component } from '@angular/core';
import {
  NavController,
  NavParams,
  LoadingController,
  AlertController,
  ActionSheetController,
  Events,
} from 'ionic-angular';

// Providers
import { ApiService } from '../../providers/api-service';

// Pages
import { LoginPage } from "../login/login";
import { PatientEditPage } from "../patient-edit/patient-edit";
import { PatientCreatePage } from "../patient-create/patient-create";
import { SampleCreatePage } from "../sample-create/sample-create";
import { SampleEditPage } from "../sample-edit/sample-edit";
import { BaseComponent } from "../components/base-component";

@Component({
  selector: 'page-patient-list',
  templateUrl: 'patient-list.html'
})
export class PatientListPage {

  private patients: any[];
  private pageLimit: number = 20;
  private canLoadMore:boolean = true;
  private infiniteScroll:any;


  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public events: Events,
              public loadingCtrl: LoadingController,
              public alertCtrl: AlertController,
              public actionSheetCtrl: ActionSheetController,
              public apiService: ApiService) {
    this.getPatients();
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PatientListPage');


    this.events.subscribe('PatientListPage:reload', () => {
      this.getPatients();
    });
  }

  getPatients() {
    this.apiService.getPatients().subscribe(
      data => {
        console.log('获取受检者成功: ', data);
        this.patients = data;
      },
      errMsg => {
        this.handleApiError(errMsg)
      }
    );
  }

  /**
   * 下拉刷新
   *
   * @param refresher
   */
  doRefresh(refresher) {
    console.log('下拉刷新中...');

    if (this.infiniteScroll) {
      this.pageLimit = 20;
      this.canLoadMore = true;
      this.infiniteScroll.enable(true);
    }

    refresher.complete();

    this.apiService.getPatients().subscribe(
      data => {
        refresher.complete();
        console.log('获取受检者成功: ', data);
        this.patients = data;
      },
      errMsg => this.handleApiError
    );
  }

  /**
   * 加载更多受检者
   *
   * @param infiniteScroll
   */
  doInfinite(infiniteScroll) {

    this.infiniteScroll = infiniteScroll;

    if (!this.canLoadMore) {
      return;
    }

    console.log('开始加载更多受检者');

    this.apiService.getPatients(this.pageLimit, this.patients.length).subscribe(
      data => {

        console.log(!data);

        // 加载完了
        if (data.length == 0) {
          this.canLoadMore = false;
          infiniteScroll.enable(false);
          return;
        }

        infiniteScroll.complete();
        console.log('获取更多受检者成功: ', data);
        this.patients = this.patients.concat(data);
      },
      errMsg => {
        infiniteScroll.complete();
        this.handleApiError(errMsg)
      }
    );
  }

  /**
   * 处理 api 报的错
   *
   * @param errMsg
   */
  handleApiError(errMsg) {

    // 显示出错信息
    let buttons: any[] = ['我知道了'];
    // todo: 服务器还有什么类型的 token 类错误都要加到为里
    if (errMsg == 'token_expired' || errMsg == 'token_invalid') {
      buttons = [
        {
          text: '重新登录',
          handler: () => {
            // 删除 token, 踢出用户
            localStorage.removeItem('id_token');
            this.navCtrl.setRoot(LoginPage);
          }
        }
      ];
    }
    let alert = this.alertCtrl.create({
      subTitle: ApiService.transformErrorMessage(errMsg),
      buttons: buttons,
    });
    alert.present();
  }
}
1 Like
26

@brandyshea facing same problem could you please help me?
and here is the road map for Ionic 2 Infinite scroll.

27

Ionic2 infinite scroll its repeating all content from provider (http request) , I want scroll to load more, please help me.