ionic5 ion-refresher下拉更新

Posted 2021-07-21 前进道路上的程序猿

前言

在现实应用中，我们需要有上拉更新，通过上拉的操作触发请求事件，请求最新的数据进行加载，这里我们使用到的组件就是ion-refresher，参考资料如下：
https://ionicframework.com/docs/api/refresher

接下来，我们就从案例中来学习这样一个组件

使用

新建项目

cmd中我们使用ionic start ionicdemo7来新建项目

页面新建列表

我们在ts中新建一个数组，并予以赋值，然后在页面中显示出来
tab1.page.ts：

tab1.page.html：

ionic serve启动后页面效果如下

接下来就是ion-refresher组件的是用了

创建ion-refresher组件

我们在页面的list的前面新建ion-refresher组件，可以直接从参考资料中案例中拷贝，也可以是用命令i-refresher命令来新建
doRefresh：


当我们下拉的时候就会触发doRefresh方法，所以我们就需要ts中新建doRefresh方法来加载相应的数据

创建数据更新的方法

tab1.page.ts

 doRefresh(event) {
    setTimeout(() => {
      for(var i=10;i<15;i++) {
          this.list.unshift("这是第"+i+"条数据");
      }
      event.target.complete();
    }, 2000);
  }

这个方法中，我们使用定时器来模拟请求更新数据，当触发方法两秒钟后，会在数组开头添加5条数据
注意，当更新完成后要使用 event.target.complete();方法来告诉组件数据已经更新好，不然会卡死

测试

接下来，就是测试了，我们下拉后，可以看到list头部加了五条数据