Ionic刷新器 _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); } }

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