ionic 清新机

刷新意味着更新当前显示的页面，以便用户可以看到最新内容。在网络术语中也称为重新加载。

在许多Android应用程序中，我们已经看到了用户友好的pull-to-refresh功能。此功能允许用户将页面下拉到一定程度，然后自动刷新当前页面视图。拉动刷新模式无需点击或单击某处。

Ionic通过使用组件添加下拉功能来提供相同的功能。 组件在内容组件上提供“推入刷新”功能。 Ionic允许用户通过触摸来检索更多数据，从而在数据列表上使用此模式。更新的数据应在刷新器的输出事件期间进行修改。一旦页面刷新结束，请在刷新器上调用complete()函数。

它是组件的子组件，其中包含文本，图标和刷新器，以在上拉至刷新期间显示。 Ionic为不同的平台提供不同的拉动图标和刷新的微调器图标。该组件包含以下属性：

• 拉图标
• pullText
• refreshingSpinner
• refreshingText

以下示例说明了Ionic应用程序中刷新的工作方式。

例

Home.page.html

在此HTML文件中，我们需要在调用Refresh事件的位置添加组件。在此组件内部，添加包含自定义刷新器属性的子组件。

  
    Ionic Refresher
  

  

  
    
  

主页

该页面负责处理事件，该事件在HTML文件的组件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor() { }
  doRefresh(event) {
    console.log('Pull Event Triggered!');
  }
}

输出：

当您执行应用程序时，您将获得输出。然后，在内容区域中下拉或拖动指针，出现以下屏幕。

自定义刷新器属性

本示例说明了自定义属性的使用，例如pullFactor，pullMin和pullMax 。如果pullFactor小于1，则下拉动画很慢。如果大于1，则下拉速度加快。其默认值为1，它等于光标速度。 pullMax和pullMin设置直到刷新器进入刷新状态之前的最大和最小距离。

例

Home.page.html

  
    Ionic Refresher
  

  

  
Pull to Refresh
  
    
  
    
      
      Item {{ i+1 }}
      
  

主页

该页面处理刷新组件中发生的事件。在这里，我们将设置“上拉刷新”的时间，该时间将在时间完成后消失。

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  dummyList: any [] = [];
  constructor() {}
  doRefresh(event) {
    console.log('Pull Event Triggered!');
    setTimeout(() => {
      this.dummyList = Array(10);
      event.target.complete();
    }, 2000);
  }
}

输出：

当您执行该应用程序时，它将给出以下输出。

现在，在内容区域中下拉或拖动指针，将显示以下屏幕。在这里，您将找到页面视图的最新更新。