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

ionic 股票列表 网络读取数据,实现下拉刷新,上拉加载的更多相关文章

  1. Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView

    在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...

  2. SwipeRefreshLayout实现下拉刷新上滑加载

    1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...

  3. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  4. [ionic开源项目教程] - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  5. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. mui下拉刷新上拉加载

    新外卖商家端主页订单大厅页面 使用mui双webview,实现下拉刷新上拉加载 主页面: order_index.html <!doctype html> <html> < ...

  9. RecyclerView下拉刷新上拉加载(三)—对Adapter的封装

    RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...

随机推荐

  1. 数字,字符串,time模块,文本进度条

    数字和字符串 数字类型 整形 整数, 1/2/3/12/2019 整形用来描述什么, 身高/年龄/体重 age = 18 height = 180 浮点型 浮点数,小数 salary = 10 pri ...

  2. 002-Zabbix 前端配置

    Zabbix 前端配置 [基于此文章的环境]点我快速打开文章 [官方地址]点我快速打开文章 第 1 步 在浏览器中,打开 Zabbix URL:http:// <server_ip_or_nam ...

  3. ArrayList对象声明& arrayList.size()

    此程序用于测试 :每次for循环内重新定义一个Integer数组,赋值后加入arrayList.由于下一次的Integer对象重新定义,原来的对象是否会被释放? 解答:不会,因为原对象仍被引用(被ar ...

  4. 201871010104-陈园园 《面向对象程序设计(java)》第十四周学习总结

    201871010104-陈园园 <面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  5. 【使用篇二】SpringBoot整合mybatis(7)

    说明:使用SpringBoot+Mybatis+Jsp实现简单的用户增删查改 #用户表 DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `) NO ...

  6. T430 Linux Setting Memo

    touchpad:xinput listxinput --disable 11 dns setting:/etc/resolv.conf vpn:@Darkduck19XX yum-config-ma ...

  7. ABP 不包裹返回的数据

    告诉abp不包裹返回的数据,返回的数据是什么 就是什么 不用再多包裹一次了. 用在 如:别人需要你提供接口 且给你指定了返回的数据结构. 源码:

  8. vue-lazyload 图片懒加载

    vue-lazyload简单使用 github地址:https://github.com/hilongjw/vue-lazyload 1.安装插件 npm install vue-lazyload - ...

  9. 推荐一款万年历App 诸葛万年历

    推荐一款万年历App 诸葛万年历 1 介绍 应用简介: 提供标准和专业的时间信息查询,记录和承载生活中的美好记忆,帮助用户高效快捷的管理个人时间.精美的日期展示和完善的重要事件提醒功能,可以方便安排日 ...

  10. java中super()和this()、super和this的区别

    1.super()和this()区别: super():调用父类无形参的构造方法: super(形参):调用父类中某个带形参的构造方法: this(形参):调用本类中另一种形式的构造方法: 注意:放在 ...