Ionic 刷新

刷新是指更新当前显示的页面，以便用户可以看到最新内容。 在 Web 术语中，它也被称为重新加载。

在许多 Android 应用程序中，我们都看到了一个用户友好的功能下拉刷新。 此功能允许用户将页面向下拖动或拉动到一定限度，然后当前页面视图将自动刷新。 下拉刷新模式消除了在某个地方点击或单击的任何需要。

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

<Ion-refresher-content>

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

• pullingIcon
• pullingText
• refreshingSpinner
• refreshingText

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

示例

Home.page.html

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

Home.page.ts

此页面负责处理在 HTML 文件的组件中使用的事件。

输出

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

自定义刷新器属性

此示例解释了自定义属性的用法，例如 pullFactor、pullMin 和 pullMax。 如果 pullFactor 小于 1，则下拉动画会变慢。 如果它大于 1，则下拉速度会加快。 它的默认值为 1，等于光标速度。 pullMax 和 pullMin 设置拉动的最大和最小距离，直到刷新器进入刷新状态。

示例

Home.page.html

Home.page.ts

此页面处理在刷新器组件中发生的事件。 在这里，我们将设置下拉刷新的时间，在时间完成之后，它会消失微调器加载图标。

输出

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

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