Question

Ionic4项目中我们可以使用Ionic4下拉分页组件ion-refresher对项目进行布局。

ion-refresher官方文档地址:https://ionicframework.com/docs/api/refresher

The 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)

angularjavascriptreactvue

  
    
  




  
    
  




  
    
    
  
</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>

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 --*/}
    
      
        
      
    

    {/*-- Custom Refresher ion-refresher　属性(Properties) --*/}
    
      
        
      
    

    {/*-- Custom Refresher Content --*/}
    
      
        
        
      
    
  
  }
);

export default Example

  
  
    
      
    
  

  
  
    
      
    
  

  
  
    
      
      
    
  



  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 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.
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.
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.
Attribute	pull-min
Type	number
Default	60
snapbackDuration
Description	Time it takes the refresher to to snap back to the refreshing state.
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 refreshing to cancelling.
Signature	cancel() => 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() => 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>