Ionic刷新器

本文概述

• <Ionic刷新器内容>
• 自定义刷新器属性

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

在许多Android应用程序中, 我们已经看到了用户友好的功能, 即可以刷新。此功能允许用户将页面下拉到某个限制, 然后自动刷新当前页面视图。拉动刷新模式无需点击或单击某处。

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

<Ionic刷新器内容>

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

• 拉图标
• pullText
• refreshingSpinner
• refreshingText

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

例

Home.page.html

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

<ion-header>
  <ion-toolbar color="light">
    <ion-title>Ionic Refresher</ion-title>
  </ion-toolbar>
</ion-header>
  
<ion-content class="ion-padding">
  <ion-refresher slot="fixed" disabled="false" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
    pullingIcon="arrow-dropdown"
    pullingText="Pull to refresh"
    refreshingSpinner="circles"
    refreshingText="Refreshing..."></ion-refresher-content>
  </ion-refresher>
</ion-content>

Home.page.ts

该页面负责处理事件, 该事件已在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

<ion-header>
  <ion-toolbar color="light">
    <ion-title>Ionic Refresher</ion-title>
  </ion-toolbar>
</ion-header>
  
<ion-content class="ion-padding">
  <h1>Pull to Refresh</h1>
  <ion-refresher slot="fixed" disabled="false" (ionRefresh)="doRefresh($event)" pullFactor="0.5" pullMin="100" pullMax="200">
    <ion-refresher-content
    pullingIcon="arrow-dropdown"
    pullingText="Pull to refresh"
    refreshingSpinner="circles"
    refreshingText="Refreshing..."></ion-refresher-content>
  </ion-refresher>
  <ion-list>  
    <ion-item *ngFor="let item of dummyList; let i=index">  
      Item {{ i+1 }}
    </ion-item>  
  </ion-list>
</ion-content>

Home.page.ts

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

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);
  }
}

输出：

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

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