ionic3之下拉刷新，下滑动加载数据-yellowcong

短命女 2022-05-31 12:56 176阅读 0赞

> 上拉和下拉，是涉及到两个组建，并不是一个组件，下拉组建是`ion-refresher`,上拉组建是`ion-infinite-scroll`,当我们滑动到下面的时候，直接给查询数据，加载。这种下拉刷新，下滑加载的功能，在很多app中很常见。这个下滑动加载的时候，有一个问题，必须数据铺满屏幕，滑动才会加载数据。

## 代码地址 ##

https://gitee.com/yellowcong/ionic/tree/master/ionic3-all

## 下拉刷新 ##

### 实现效果 ###

![这里写图片描述][SouthEast]

### 前台界面 ###

界面中，需要使用到`ion-refresher`的标签，然后设定下拉刷新的方法

<ion-refresher (ionRefresh)="doRefresh($event)"> 
           <ion-refresher-content
               pullingIcon="arrow-dropdown"
               pullingText="下拉刷新"
               refreshingSpinner="circles"
               refreshingText="刷新..."> 
           </ion-refresher-content>
           <ion-refresher-content > 
       </ion-refresher-content>
       </ion-refresher>

### 后台代码 ###

`refresher`这个对象是刷新的对象，可以通过 `refresher.complete();`关闭这个对象。这个地方，我使用的是假数据，然后设定加载后，2秒关闭这个下拉界面

//下拉刷型界面
    doRefresh(refresher){
    
        console.log("下拉刷新");
        //动态切换
        //当用户数量为3
        if(this.users.length ==3){
            this.users = this.user2;
        }else{
            this.users = this.default_data;
        }
        setTimeout(() => { console.log('加载完成后，关闭刷新'); refresher.complete(); //toast提示 this.showInfo("加载成功"); }, 2000); }

## 下滑动加载效果 ##

下滑加载效果，有一个特点，就是，必须数据铺满整个界面的时候，才可以使用下滑动加载，这点是需要注意的。

### 实现效果 ###

![这里写图片描述][SouthEast 1]

### 前台代码 ###

<ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
         <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中..."> 
          </ion-infinite-scroll-content> 
      </ion-infinite-scroll>

### 后台代码 ###

这个里面的`infiniteScroll`对象，同下拉的控件一样，也可以使用`infiniteScroll.complete();` 来关闭对象，同时，还可以通过`infiniteScroll.enable(false);`直接销毁下拉加载，当我们加载完成所有的数据的时候，可以通过这个方法来做。

//下滑动加载数据
    doInfinite(infiniteScroll){
    
        setTimeout(() => { console.log('加载完成后，关闭刷新'); infiniteScroll.complete(); //toast提示 this.showInfo("加载成功"); //增加index this.cnt ++; var data1 = {name:'yellowcong'+this.cnt,age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"}; this.users.push(data1); if(this.cnt >=10){ //如果都加载完成的情况，就直接 disable ，移除下拉加载 infiniteScroll.enable(false); //toast提示 this.showInfo("已加载所有"); } }, 2000); }

## 完整代码 ##

### 前台代码（refresh.html） ###

<ion-header> <ion-navbar> <ion-title> 下拉列表刷型 </ion-title> </ion-navbar> </ion-header> <ion-content> <h1>下拉列表刷新</h1> <ion-refresher (ionRefresh)="doRefresh($event)"> <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="刷新..."> </ion-refresher-content> <ion-refresher-content > </ion-refresher-content> </ion-refresher>  <ion-list>  <ion-item (click)="clickItem(item)" *ngFor="let item of users">  <ion-avatar item-start> <img src="{ { item.img}}"> </ion-avatar> <h2>{ { item.name}}</h2> <p>{ { item.description}}</p>  <p item-end>{ { item.gender?'男':'女'}}, { { year_now - item.age}} 岁</p> </ion-item> </ion-list>  <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="加载中..."> </ion-infinite-scroll-content> </ion-infinite-scroll> </ion-content>

### 后台代码（refresh.ts） ###

//@angular/core是一个npm的模块，定义了angular的核心功能
    import { Component } from '@angular/core';
    
    import { Http, Response } from '@angular/http';
    
    //导入http请求的工具
    
    //NavController就是用来管理和导航页面的一个controlle
    //NavParams 这个是参数
    import { NavController,NavParams } from 'ionic-angular';
    
    import {ToastController  } from 'ionic-angular';
    @Component({
        selector: 'page-web',
        templateUrl: 'refresh.html'
      })
    //export关键词：将类暴露出去，以便其它的文件可以import到它。
    //类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
    export class RefreshPage { 
    
        users:any = [{
       name:'小明',age:'1970', gender:'1', description:'逗比',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'小王',age:'1992', gender:'0', description:'王逗比',img:"http://www.runoob.com/try/demo_source/spengler.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/stantz.jpg"},
                    ];
    
        user2:any = [{
       name:'yellowcong',age:'1970', gender:'1', description:'逗比',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1992', gender:'0', description:'王逗比',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    ];
    
        default_data:any = [{
       name:'yellowcong',age:'1970', gender:'1', description:'逗比',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1992', gender:'0', description:'王逗比',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    {
       name:'yellowcong',age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"},
                    ];
        //当前日期
        year_now;
    
        //条数
        cnt:number =0;
    
        constructor(private toastCtrl:ToastController){
            this.year_now = new Date().getFullYear();
        }
    
        //下滑动加载数据
        doInfinite(infiniteScroll){
    
            setTimeout(() => { console.log('加载完成后，关闭刷新'); infiniteScroll.complete(); //toast提示 this.showInfo("加载成功"); //增加index this.cnt ++; var data1 = {name:'yellowcong'+this.cnt,age:'1994', gender:'1', description:'三炮',img:"http://www.runoob.com/try/demo_source/venkman.jpg"}; this.users.push(data1); if(this.cnt >=10){ //如果都加载完成的情况，就直接 disable ，移除下拉加载 infiniteScroll.enable(false); //toast提示 this.showInfo("已加载所有"); } }, 2000); } //下拉刷型界面 doRefresh(refresher){ console.log("下拉刷新"); //动态切换 //当用户数量为3 if(this.users.length ==3){ this.users = this.user2; }else{ this.users = this.default_data; } setTimeout(() => { console.log('加载完成后，关闭刷新'); refresher.complete(); //toast提示 this.showInfo("加载成功"); }, 2000); } //点击了哪一条消息 clickItem(item){ console.log(item); this.showInfo('点击了'+ item.name); } //显示toast消息 showInfo(msg){ let toast = this.toastCtrl.create({ message: msg, //提示消息 duration: 3000,//3秒后自动消失 position: 'bottom',//位置top,bottom showCloseButton:true, //是否显示关闭按钮 closeButtonText:"关闭" //关闭按钮字段 }); //关闭后执行的操作 toast.onDidDismiss(() => { console.log('toast被关闭之后执行'); }); //显示toast toast.present();//符合触发条件后立即执行显示。 } }

## 参考文章 ##

[http://www.runoob.com/ionic/ionic-ion-refresher.html][http_www.runoob.com_ionic_ionic-ion-refresher.html]  
[https://ionicframework.com/docs/api/components/refresher/Refresher/][https_ionicframework.com_docs_api_components_refresher_Refresher]  
[https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/][https_ionicframework.com_docs_api_components_infinite-scroll_InfiniteScroll]

[SouthEast]: /images/20220531/c020fd91385c4669b00c9f37e57dcff6.png
[SouthEast 1]: /images/20220531/72b2c0ee5d0c40bb9b93bfdb43cf554e.png
[http_www.runoob.com_ionic_ionic-ion-refresher.html]: http://www.runoob.com/ionic/ionic-ion-refresher.html
[https_ionicframework.com_docs_api_components_refresher_Refresher]: https://ionicframework.com/docs/api/components/refresher/Refresher/
[https_ionicframework.com_docs_api_components_infinite-scroll_InfiniteScroll]: https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/