ion-refresher
Ionic4项目中我们可以使用Ionic4下拉分页组件ion-refresher对项目进行布局。 ion-refresher官方文档地址:https://ionicframework.com/docs/api/refresherThe refresher provides pull-to-refresh functionality on a content component. The pull-to-refresh pattern lets a user pull down on a list of data using touch in order to retrieve more data.
Data should be modified during the refresher's output events. Once the async
operation has completed and the refreshing should end, call complete()
on the
refresher.
ion-refresher 用法(Usage)
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content>ion-refresher-content>
ion-refresher>
ion-content>
<ion-content>
<ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
<ion-refresher-content>ion-refresher-content>
ion-refresher>
ion-content>
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
ion-refresher-content>
ion-refresher>
ion-content>
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);
}
}
<ion-content>
<ion-refresher slot="fixed">
<ion-refresher-content>ion-refresher-content>
ion-refresher>
ion-content>
<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>
<ion-content>
<ion-refresher slot="fixed">
<ion-refresher-content
pulling-icon="arrow-dropdown"
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';
function doRefresh(event: CustomEvent) {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
const Example: React.SFC<{}> = () => (
<>
{/*-- Default Refresher --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
<IonRefresherContent>IonRefresherContent>
IonRefresher>
IonContent>
{/*-- Custom Refresher ion-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="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
IonRefresherContent>
IonRefresher>
IonContent>
>
}
);
export default Example
<template>
<ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content>ion-refresher-content>
ion-refresher>
ion-content>
<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>
<ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content
pulling-icon="arrow-dropdown"
pulling-text="Pull to refresh"
refreshing-spinner="circles"
refreshing-text="Refreshing...">
ion-refresher-content>
ion-refresher>
ion-content>
template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component()
export default class Example extends Vue {
doRefresh(event) {
console.log('Begin async operation');
setTimeout(() => {
console.log('Async operation has ended');
event.target.complete();
}, 2000);
}
}
script>
ion-refresher 属性(Properties)
closeDuration | |
---|---|
Description | Time it takes to close the refresher. |
Attribute | close-duration |
Type | string |
Default | '280ms' |
disabled | |
Description | If |
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 For example: If the value passed is |
Attribute | pull-factor |
Type | number |
Default | 1 |
pullMax | |
Description | The maximum distance of the pull until the refresher
will automatically go into the |
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 |
Attribute | pull-min |
Type | number |
Default | 60 |
snapbackDuration | |
Description | Time it takes the refresher to to snap back to the |
Attribute | snapback-duration |
Type | string |
Default | '280ms' |
ion-refresher 事件(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. |
ion-refresher 内置方法(Methods)
cancel | |
---|---|
Description | Changes the refresher's state from |
Signature | cancel() => void |
complete | |
Description | Call |
Signature | complete() => void |
getProgress | |
Description | A number representing how far down the user has pulled.
The number |
Signature | getProgress() => Promise |