Bài 41: Refresher Tìm hiểu ion-refresher, ion-refresher-content

  

ion-refresher

refresher provides cung cấp chức năng kéo(pull-to-refresh) để làm mới trên một thành phần nội dung. Kiểu kéo để làm mới cho phép người dùng kéo xuống danh sách dữ liệu bằng cách sử dụng thao tác chạm để truy xuất thêm dữ liệu.

Dữ liệu phải được sửa đổi trong các sự kiện đầu ra của refresher's. Khi hoạt động không đồng bộ đã hoàn thành và refreshing sẽ kết thúc, hãy gọi complete() làm mới(refresher).

 

Native Refreshers

Cả hai nền tảng iOS và Android đều cung cấp các bản làm mới tận dụng các thuộc tính được hiển thị bởi các thiết bị tương ứng của chúng để tạo ra một cảm giác linh hoạt, giống như bản địa.

Một số thuộc tính như pullMinvà snapbackDurationkhông tương thích vì phần lớn các bản làm mới gốc là dựa trên cuộn. 

IOS Usage

Sử dụng bản gốc iOS ion-refresheryêu cầu đặt thuộc tính pullingIcon trong ion-refresher-content thành giá trị của một trong các trình quay vòng có sẵn. Giá trị pullingIcon mặc định là linesspinner trên iOS. Các dấu tick của spinner sẽ được hiển thị dần dần khi người dùng kéo xuống trên trang.

Bản gốc iOS ion-refresher dựa vào rubber band scrolling in order để hoạt động bình thường và do đó chỉ tương thích với các thiết bị iOS. Chúng tôi cung cấp bản cập nhật dự phòng cho các ứng dụng chạy ở chế độ iOS trên các thiết bị không hỗ trợ rubber band scrolling in order

Android Usage

Việc sử dụng bản gốc MD ion-refresheryêu cầu đặt thuộc pullingIcontính ion-refresher-contentthành giá trị của một trong các trình quay vòng có sẵn.  pullingIcon mặc định là circularspinner trên MD.

Usage

<!-- Default Refresher -->
<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
  <ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="chevron-down-circle-outline"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
</ion-content>

CopyCopied

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

@Component({
  selector: 'refresher-example',
  templateUrl: 'refresher-example.html',
  styleUrls: ['./refresher-example.css'],
})
export class RefresherExample {
  constructor() {}

  doRefresh(event) {
    console.log('Begin async operation');

    setTimeout(() => {
      console.log('Async operation has ended');
      event.target.complete();
    }, 2000);
  }
}

<!-- Default Refresher -->
<ion-content>
  <ion-refresher slot="fixed">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
  <ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
  <ion-refresher slot="fixed">
    <ion-refresher-content
      pulling-icon="chevron-down-circle-outline"
      pulling-text="Pull to refresh"
      refreshing-spinner="circles"
      refreshing-text="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>
</ion-content>

import React from 'react';
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
import { RefresherEventDetail } from '@ionic/core';
import { chevronDownCircleOutline } from 'ionicons/icons';

function doRefresh(event: CustomEvent<RefresherEventDetail>) {
  console.log('Begin async operation');

  setTimeout(() => {
    console.log('Async operation has ended');
    event.detail.complete();
  }, 2000);
}

export const RefresherExample: React.FC = () => (
  <IonContent>
    {/*-- Default Refresher --*/}
    <IonContent>
      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
        <IonRefresherContent></IonRefresherContent>
      </IonRefresher>
    </IonContent>

    {/*-- Custom Refresher Properties --*/}
    <IonContent>
      <IonRefresher slot="fixed" onIonRefresh={doRefresh} pullFactor={0.5} pullMin={100} pullMax={200}>
        <IonRefresherContent></IonRefresherContent>
      </IonRefresher>
    </IonContent>

    {/*-- Custom Refresher Content --*/}
    <IonContent>
      <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
        <IonRefresherContent
          pullingIcon={chevronDownCircleOutline}
          pullingText="Pull to refresh"
          refreshingSpinner="circles"
          refreshingText="Refreshing...">
        </IonRefresherContent>
      </IonRefresher>
    </IonContent>
  </IonContent>
);

import { Component, h } from '@stencil/core';

@Component({
  tag: 'refresher-example',
  styleUrl: 'refresher-example.css'
})
export class RefresherExample {
  doRefresh(ev: any) {
    console.log('Begin async operation');

    setTimeout(() => {
      console.log('Async operation has ended');
      ev.target.complete();
    }, 2000);
  }

  render() {
    return [
      // Default Refresher
      <ion-content>
        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
          <ion-refresher-content></ion-refresher-content>
        </ion-refresher>
      </ion-content>,

      // Custom Refresher Properties
      <ion-content>
        <ion-refresher slot="fixed" pullFactor={0.5} pullMin={100} pullMax={200}>
          <ion-refresher-content></ion-refresher-content>
        </ion-refresher>
      </ion-content>,

      // Custom Refresher Content
      <ion-content>
        <ion-refresher slot="fixed" onIonRefresh={(ev) => this.doRefresh(ev)}>
          <ion-refresher-content
            pullingIcon="chevron-down-circle-outline"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
          </ion-refresher-content>
        </ion-refresher>
      </ion-content>
    ];
  }
}

<template>
  <!-- Default Refresher -->
  <ion-content>
    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
  </ion-content>

  <!-- Custom Refresher Properties -->
  <ion-content>
    <ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
      <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
  </ion-content>

  <!-- Custom Refresher Content -->
  <ion-content>
    <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
      <ion-refresher-content
        :pulling-icon="chevronDownCircleOutline"
        pulling-text="Pull to refresh"
        refreshing-spinner="circles"
        refreshing-text="Refreshing...">
      </ion-refresher-content>
    </ion-refresher>
  </ion-content>
</template>

<script lang="ts">
import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
import { chevronDownCircleOutline } from 'ionicons/icons'
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonContent, IonRefresher, IonRefresherContent },
  setup() {
    const doRefresh = (event: CustomEvent) => {
      console.log('Begin async operation');

      setTimeout(() => {
        console.log('Async operation has ended');
        event.target.complete();
      }, 2000);
    }
    return { chevronDownCircleOutline, doRefresh }
  }
});
</script>

Properties

closeDuration
Description	Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher.
Attribute	close-duration
Type	string
Default	'280ms'
disabled
Description	If true, the refresher will be hidden.
Attribute	disabled
Type	boolean
Default	false
pullFactor
Description	How much to multiply the pull speed by. To slow the pull animation down, pass a number less than 1. To speed up the pull, pass a number greater than 1. The default value is 1 which is equal to the speed of the cursor. If a negative value is passed in, the factor will be 1 instead. For example: If the value passed is 1.2 and the content is dragged by 10 pixels, instead of 10 pixels the content will be pulled by 12 pixels (an increase of 20 percent). If the value passed is 0.8, the dragged amount will be 8 pixels, less than the amount the cursor has moved. Does not apply when the refresher content uses a spinner, enabling the native refresher.
Attribute	pull-factor
Type	number
Default	1
pullMax
Description	The maximum distance of the pull until the refresher will automatically go into the refreshing state. Defaults to the result of pullMin + 60. Does not apply when the refresher content uses a spinner, enabling the native refresher.
Attribute	pull-max
Type	number
Default	this.pullMin + 60
pullMin
Description	The minimum distance the user must pull down until the refresher will go into the refreshing state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
Attribute	pull-min
Type	number
Default	60
snapbackDuration
Description	Time it takes the refresher to to snap back to the refreshing state. Does not apply when the refresher content uses a spinner, enabling the native refresher.
Attribute	snapback-duration
Type	string
Default	'280ms'

Events

Name	Description
ionPull	Emitted while the user is pulling down the content and exposing the refresher.
ionRefresh	Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed.
ionStart	Emitted when the user begins to start pulling down.

Methods

cancel
Description	Changes the refresher's state from refreshing to cancelling.
Signature	cancel() => Promise<void>
complete
Description	Call complete() when your async operation has completed. For example, the refreshing state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request. Once the data has been received, you then call this method to signify that the refreshing has completed and to close the refresher. This method also changes the refresher's state from refreshing to completing.
Signature	complete() => Promise<void>
getProgress
Description	A number representing how far down the user has pulled. The number 0 represents the user hasn't pulled down at all. The number 1, and anything greater than 1, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than 1, then the refresh will not happen, and the content will return to it's original position.
Signature	getProgress() => Promise<number>

ion-refresher-content

refresher content làm mới chứa văn bản, biểu tượng và con quay để hiển thị trong quá trình kéo để làm mới. Ionic cung cấp biểu tượng kéo và con quay làm mới dựa trên nền tảng. Tuy nhiên, biểu tượng, con quay và văn bản mặc định có thể được tùy chỉnh dựa trên trạng thái của trình làm mới.

Properties

pullingIcon
Description	A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices.
Attribute	pulling-icon
Type	null | string | undefined
pullingText
Description	The text you want to display when you begin to pull down. pullingText can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become &lt;Ionic&gt; For more information: Security Documentation
Attribute	pulling-text
Type	IonicSafeString | string | undefined
refreshingSpinner
Description	An animated SVG spinner that shows when refreshing begins
Attribute	refreshing-spinner
Type	"bubbles" | "circles" | "circular" | "crescent" | "dots" | "lines" | "lines-small" | null | undefined
refreshingText
Description	The text you want to display when performing a refresh. refreshingText can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example <Ionic> would become &lt;Ionic&gt; For more information: Security Documentation
Attribute	refreshing-text
Type	IonicSafeString | string | undefined