作者: 老葛 亚艾元软件
分页参考:
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;
后来改为了另一种形式,看起来更简单: