ionic 股票列表 网络读取数据,实现下拉刷新,上拉加载 - Go语言中文社区

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);
}

}
 
版权声明:本文来源博客园,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://www.cnblogs.com/codeadmin/p/11243684.html
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-11-17 14:57:27
  • 阅读 ( 1019 )
  • 分类:

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢