ionic下拉刷新上拉加载功能

北纬的距离

已于 2023-03-18 13:26:47 修改

阅读量299

点赞数 1

文章标签： angular.js typescript 前端 Powered by 金山文档

于 2023-03-18 11:49:18 首次发布

本文链接：https://blog.csdn.net/qq_24909149/article/details/129634686

版权

本文介绍了如何在Ionic应用中实现下拉刷新和上拉加载功能。通过使用<ion-refresher>和<ion-infinite-scroll>组件，结合属性设置如pullingIcon、pullingText、refreshingSpinner等，以及对应的TypeScript方法doRefresh和doInfinite来处理刷新和加载事件，实现了数据的动态更新和分页加载。

摘要由CSDN通过智能技术生成

1、下拉刷新

（1）在页面上方添加标签

 <ion-refresher>
     <ion-refresher-content></ion-refresher-content>
 </ion-refresher>

（2）属性

pullingIcon 下拉的图标

pullingText 下拉加载显示的文字

refreshingSpinner 释放的时候的加载图标

refreshingText 释放的时候的文字

（3）html代码

<ion-refresher (ionRefresh)="doRefresh($event)" immediate-check="false">
   <ion-refresher-content pullingIcon="ion-md-direction-arrow-down"
    pullingText="下拉刷新" refreshingSpinner="circles"
    refreshingText="正在刷新...">
   </ion-refresher-content>
</ion-refresher>

（4）ts代码

doRefresh(refresher) {
  console.log('Begin async operation', refresher);
  this.currentPage = 1;
  setTimeout(() => {
    var num =  this.tabNum;
    switch(num){
      case 1:
        this.getVolunteerData(this.perPage,this.currentPage);
        break
      case 2:
        this.getRegisterData(this.perPage,this.currentPage);
        break;
      case 3:
        this.getHelpData(this.perPage+5,this.currentPage);
      break;
    }
    refresher.complete();
 }, 2000);
}

（5）效果图

2、上拉加载

（1）添加标签

<ion-infinite-scroll>
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>

（2）属性

threshold 距离底部的距离

enable 是否何用

position:button 显示的位置可选top

loadingSpinner 配置上拉加载更多的图标

loadingText 上拉加载显示的文字

（3）html代码

 <ion-infinite-scroll enable="true" (ionInfinite)="doInfinite($event)"
    threshold="10px" immediate-check="false" distance=10%>
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="加载更多...">
    </ion-infinite-scroll-content>
</ion-infinite-scroll>

（4）ts代码

doInfinite(infiniteScroll,num) {
    setTimeout(() => {
        this.currentPage++;
        var num =  this.tabNum;
        switch(num){
          case 1:
            this.getVolunteerData(this.perPage,this.currentPage);
            break;
          case 2:
            this.getRegisterData(this.perPage,this.currentPage);
            break;
          case 3:
            this.getHelpData(this.perPage+5,this.currentPage);
            break;
        }
        infiniteScroll.complete();
    }, 2500);
}

（5）效果图