一、上拉分页更新（加载更多）
1、在上拉更新的页面中加入ion-infinite-scroll
https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/
只要在页面ion-content底部加入上面的代码，就会触发ionInfinite事件（当页面拉倒页面最底部的时候触发），执行一个方法doInfinite
<ion-content> <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="正在加载更多..."> </ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content>
ion-infinite-scroll 的属性：
threshold 距离底部的距离
enable 是否何用
position:button 显示的位置 可选 top
ion-infinite-scroll-content 的属性：
loadingSpinner 配置上拉加载更多的图标 常用图标：https://ionicframework.com/docs/api/components/spinner/Spinner/
loadingText 上拉加载显示的文字
2、上拉事件触发的方法
/*上拉更新*/
doInfinite(infiniteScroll){ /*接收事件对象传值*/
// console.log('11111')
this.requestData(infiniteScroll);
}import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
//引入请求数据的模块
import { Http, Jsonp} from '@angular/http';
//新闻详情
import { NewscontentPage } from '../newscontent/newscontent';
/**
* Generated class for the NewsPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-news',
templateUrl: 'news.html',
})
export class NewsPage {
//2、list用于存放数据
public list=[];
//1、定义一个公共page属性用于请求数据
public page=1;
public NewscontentPage=NewscontentPage; /*新闻详情页面*/
constructor(public navCtrl: NavController,public http: Http,public jsonp: Jsonp) {
//4、页面第一次进来的时候传个空值进去判断下
this.requestData('');
}
ionViewDidLoad() {
console.log('ionViewDidLoad NewsPage');
}
requestData(infiniteScroll){ /*请求数据*/
var that=this;
var url='http://localhost/appapi.ashx?a=getPortalList&catid=20&page='+this.page;
this.http.get(url).subscribe(function(data){
// console.log(data['_body']);
var response=JSON.parse(data['_body']).result;
that.list=that.list.concat(response); /*拼接每次请求的数据*/
that.page++; /*每次请求完成page+1 */
if(infiniteScroll){
infiniteScroll.complete(); /*请求完成数据更新页面*/
if(response<20){ /*没有数据 禁用上拉更新*/
infiniteScroll.enable(false);
}
}
},function(err){
})
}
/*上拉更新*/
doInfinite(infiniteScroll){ /*接收事件对象传值*/
// 3、数据请求完成需要执行infiniteScroll.complete(); 方法所以需要传参数infiniteScroll过去
this.requestData(infiniteScroll);
}
}重要方法：
infiniteScroll.complete(); //每次数据请求完成调用 注意是每次
if (this.items.length > 90) {
infiniteScroll.enable(false); //没有数据的时候隐藏 ion-infinate-scroll
}二、下拉更新（获取最新信息）
1、ionic 在下拉加载的页面中加入ion-refresher
https://ionicframework.com/docs/api/components/refresher/Refresher/
<ion-content> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing..."> </ion-refresher-content> </ion-refresher> </ion-content>
重要事件： doRefresh
ion-refresher 的重要属性：
closeDuration 关闭 refresher 需要多少毫秒。默认值是 280。
enabled 是否启用
pullMax 默认=pullMin+60 拖至刷新状态的最大距离将自动进入刷新状态。默认情况下，拉力最大将 pullmin + 60 自动刷新
pullMin 默认=60 用户必须拉下的最小距离，直到刷新者进入刷新状态为止。默认值是60。
snapbackDuration 刷新者需要多少毫秒才能恢复到刷新状态。默认值是 280。
ion-refresher-content 的重要属性：
pullingIcon 下拉的图标
pullingText 下拉加载显示的文字
refreshingSpinner 释放的时候的加载图标
refreshingText 释放的时候的文字
重要方法：
refresher.complete(); //当数据请求完成调用
例子：
<ion-content padding>
<ion-refresher (ionRefresh)="doRefresh($event)" pullMax='300'>
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh..."
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<ion-list inset >
<ion-item *ngFor="let item of list">
{{item}}
</ion-item>
</ion-list>
</ion-content>import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
/**
* Generated class for the RefresherPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-refresher',
templateUrl: 'refresher.html',
})
export class RefresherPage {
public list=[];
public j=0;
constructor(public navCtrl: NavController, public navParams: NavParams) {
for(var i=0;i<5;i++){
this.list.push(`这是第${i}条数据 `);
}
}
ionViewDidLoad() {
console.log('ionViewDidLoad RefresherPage');
}
doRefresh(refresher){
//模拟请求数据
setTimeout(()=>{
for(var i=0;i<5;i++){
this.list.unshift(`这是第${this.j}条数据 `);//unshift在数组前面插入数据
this.j++;
}
refresher.complete(); /*加载完成以后重新渲染页面*/
},1000)
}
}