ionic4--下拉刷新（refresher）

最新推荐文章于 2021-06-04 00:39:12 发布

@Herry

最新推荐文章于 2021-06-04 00:39:12 发布

阅读量1k

点赞数

分类专栏： # 【Ionic】

本文链接：https://blog.csdn.net/aimin_com/article/details/90145636

版权

【Ionic】专栏收录该内容

11 篇文章 0 订阅

订阅专栏

/----------------------------------------------说明区--------------------------------------------------/

今天学习下下拉刷新，我们只关注HTML和其中的ionRefresh的方法体，说白了下拉刷新其实就是将本页的所有的数据集合重新获取下，为了保证更快有的时候我们只刷新部分，但是下拉刷新是将所有的数据在不返回的情况下进行正常走一遍，请看代码区：

/----------------------------------------------代码区--------------------------------------------------/

参照HTML

<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content 
    	pullingIcon="arrow-dropdown" 
    	pullingText="下拉刷新页面" 
    	refreshingSpinner="circles"
      	refreshingText="加载中...">
    </ion-refresher-content>
  </ion-refresher>

<!-- 
  ionRefresh: 是方法区
  pullingIcon：开始下拉时显示的静态图标
  pullingText：开始下拉时要显示的文本
  refreshingSpinner：一个动画SVG微调器，显示刷新开始时
  refreshingText：执行刷新时要显示的文本
  
参照：https://ionicframework.com/docs/api/refresher-content
-->

参照ts代码

  doRefresh(event: any) {

    this.ngOnInit();  // 调用的方法，这个初始化的内容，所有肯定有页面的数据，也可以直接写个方法：this.gotoSignIn()
    setTimeout(() => {
      event.target.complete();  // 这个是我们进行执行方法必须的
    }, 1000);  // 1000表示执行的时间在1s内，如果执行的慢的话这个需要在增加
  }

/----------------------------------------------注意事项--------------------------------------------------/

我们需要在每个显示的数组前面将此数组进行置空才行，例如以下：

 this.courses = res.json().data;    // 将后端传来数据存入数组
        console.log('cources', this.courses);  // 打印到我们F12页面上
        // tslint:disable-next-line:forin      // 此注释是为了让tslint审查组件不审查此代码
        this.practice = [];                    // 让我们的post后的数组清空
        for (const k in this.courses) {
        this.practice.push(k);                 // 我们将此数据post后存入新的数组中备用，所以我们需要清空practice即可。
       }

目的是防止下拉刷新是增加数据而不是刷新。

/----------------------------------------------总结区--------------------------------------------------/

小结：一般的情况下，将此代码直接复制到我们需要的下拉刷新的地方即可，因为我们这个HTML页不需要修改（当然可以自行更换好看的下拉图标），ts代码执行的是ngOnInit（初始化的内容）一般不用换，可以自行更换页面需要数据的方法即可。
参考页面的美观：https://ionicframework.com/docs/api/refresher