ionic 股票列表 网络读取数据，实现下拉刷新，上拉加载

html:　　

<ion-header>

<ion-toolbar>

<ion-title>

股票

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">

<ion-refresher-content

pullingIcon="arrow-dropdown"

pullingText="下拉刷新"

refreshingSpinner="circles"

refreshingText="下拉刷新11">

</ion-refresher-content>

</ion-refresher>

<ion-grid>

<ion-row *ngFor="let item of aboutData.stockData"

[routerLink]="[ '/stock-details']"

[queryParams]="item"

>

<ion-col size="3" >

{{ item.symbol}}

</ion-col>

<ion-col size="6">

{{ item.name}}

</ion-col>

<ion-col >

{{ item.lasttrade}}

</ion-col>

</ion-row>

</ion-grid>

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

<ion-infinite-scroll-content loadingSpinner="ios" loadingText="上拉加载">

</ion-infinite-scroll-content>

</ion-infinite-scroll>

</ion-content>

 

ts:

import { Component } from '@angular/core';

import { HttpClient } from '@angular/common/http';

@Component({

selector: 'app-tab2',

templateUrl: 'tab2.page.html',

styleUrls: ['tab2.page.scss']

})

export class Tab2Page {

//f37304922567ba032a7332a50765b21a

aboutData={

url:"http://web.juhe.cn:8080/finance/stock/hkall",

ionicUrl:"http://106.13.46.223:8066/home/getData",

ionicStockUrl:"http://106.13.46.223:8066/home/GetStockAllData",

key:"f37304922567ba032a7332a50765b21a",

page:1,

stockData:[

],

httpOptions:{}

}

constructor(public http:HttpClient) {

this.http.get(

this.aboutData.ionicStockUrl+"?url="+

this.aboutData.url+"?key="+this.aboutData.key+"&page="+this.aboutData.page)

.subscribe((respone:any)=>{

console.log(respone);

if(respone.reason=="SUCCESSED!")

{

// this.aboutData.stockData.push(respone.result.data);

this.aboutData.stockData.push.apply(this.aboutData.stockData,respone.result.data);

//

this.aboutData.page=parseInt(respone.result.page)+1;

}

})

}

doRefresh($event) {  

this.aboutData.page=1;

this.http.get(

this.aboutData.ionicStockUrl+"?url="+

this.aboutData.url+"?key="+this.aboutData.key+"&page="+this.aboutData.page)

.subscribe((respone:any)=>{

console.log(respone);

if(respone.reason=="SUCCESSED!")

{

this.aboutData.stockData.length=0;

// this.aboutData.stockData.push(respone.result.data);

this.aboutData.stockData.push.apply(this.aboutData.stockData,respone.result.data);

//

this.aboutData.page=parseInt(respone.result.page)+1;

}

$event.target.complete();

})

}

doInfinite($event) {  

console.log(this.aboutData.page);

this.http.get(

this.aboutData.ionicStockUrl+"?url="+

this.aboutData.url+"?key="+this.aboutData.key+"&page="+this.aboutData.page)

.subscribe((respone:any)=>{

console.log(respone);

if(respone.reason=="SUCCESSED!")

{

// this.aboutData.stockData.push(respone.result.data);

this.aboutData.stockData.push.apply(this.aboutData.stockData,respone.result.data);

//

this.aboutData.page=parseInt(respone.result.page)+1;

console.log(this.aboutData.page);

}

$event.target.complete();

})

}

rowClick($event)

{

console.log($event.target);

}

}