You are here

Ionic3 解决分页问题(下拉无限滚动效果)

g089h515r806 的头像
Submitted by g089h515r806 on 星期日, 2017-10-29 15:21

作者: 老葛 亚艾元软件

分页参考:

http://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

 

实例代码:

  private pageNum:number = 0;

  private pageSize:number = 10;

  private hasMore:boolean = true;

 

  loadCases() {

        

    return new Promise(resolve => {


  var url = 'http://localhost/example/' + 'caselistjson?page=' + this.pageNum;

      setTimeout(() => {

  this.http.request(url)

  .subscribe((res: Response) => {

//this.items = res.json().nodes;

let tempItems = this.items;

let nodes = res.json().nodes;

this.items = tempItems.concat(nodes);

if(nodes.length < this.pageSize){

  this.hasMore = false;

}

//this.items.concat(res.json().nodes);

console.log(this.items);

resolve(true);

  });

      }, 500);   

 

            

    });


 

  }

  

  doInfinite(infiniteScroll) {

 

 if(this.hasMore){

 console.log('doInfinite, start is currently '+this.pageNum);

 this.pageNum+=1;

 

 this.loadCases().then(()=>{

   infiniteScroll.complete();

 });

 }else{

//infiniteScroll.complete();

        infiniteScroll.enable(false);  

 }

     

  }

模板文件里面:

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

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

 </ion-infinite-scroll>

 

 

将URL参数,设置为可以全局配置的。

创建文件:app-config.module.ts

里面代码如下:

import { NgModule, InjectionToken } from '@angular/core';

 

export let APP_CONFIG = new InjectionToken<AppConfig>('app.config');

 

export class AppConfig {

  apiEndpoint: string;

}

 

export const APP_DI_CONFIG: AppConfig = {

  apiEndpoint: 'http://localhost/huangdu2'

};

 

@NgModule({

  providers: [{

    provide: APP_CONFIG,

    useValue: APP_DI_CONFIG

  }]

})

export class AppConfigModule { }

 

在app.module.ts里面注册一下:

import { AppConfigModule } from './app-config.module';

  imports: [

    BrowserModule,

HttpModule,

    IonicModule.forRoot(MyApp),

AppConfigModule

  ],

 

在代码里面引用:

import { Injectable, Inject } from '@angular/core';

import { APP_CONFIG, AppConfig } from '../../app/app-config.module';

@Injectable()

export class CaseListPage {

 

  public items: any = [];

  private pageNum:number = 0;

  private pageSize:number = 10;

  private hasMore:boolean = true;

  

 

  constructor(

    public navCtrl: NavController,

public navParams: NavParams,

private http: Http,

@Inject(APP_CONFIG) private config: AppConfig

  )

 

var url = `${this.config.apiEndpoint}/caselistjson?page=` + this.pageNum;

 

后来改为了另一种形式,看起来更简单:

 


论坛:

Drupal版本: