ionic 股票列表 网络读取数据，实现下拉刷新，上拉加载
程序员文章站
2022-03-23 13:41:51
html: 股票
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);
}
}
上一篇： display的属性
下一篇： CentOS7最小化安装后