ionic 股票列表 网络读取数据，实现下拉刷新，上拉加载
2024-09-07 06:17:27
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);
}
}
最新文章
- 理解ThreadLocal(之二)
- javascript 利用匿名函数对象给你异步回调方法传参数
- WebApi系列~基于单请求封装多请求的设计
- sqoop与mysql之间中文乱码
- Openfire 的安装和配置
- ubuntu之使用sublime text3搭建Python IDE
- Android开发 将数据保存到SD卡
- c++ primer复习（四）
- iOS：使用导航栏
- [置顶] Android EditText/TextView使用SpannableString显示复合文本
- mysql触发器使用注意
- 利用openURL，在IOS应用中打开另外一个应用
- 微信小程序教学第三章（含视频）：小程序中级实战教程：列表-页面逻辑处理
- 底部导航栏实现一 Fragment-replace
- git冲突时解决方法
- idea创建父子工程
- Map获取key值
- JavaScript字符串练习
- Vertica备份恢复
- JavaScript访问对象的属性和方法