【翻译】Ionic的刷新器-Refresher官方文档翻译

ion-refresher
The Refresher provides pull-to-refresh functionality on a content component. Place the ion-refresher as the first child of your ion-content element.
Refresher刷新器可以在内容组件（component）里提供【下拉刷新】功能。把ion-refresher作为你ion-content元素的第一个子元素；

<ion-header>    <ion-navbar>        <ion-title>首页</ion-title>    </ion-navbar></ion-header><ion-content>  <ion-refresher (ionRefresh)="refresh($event)">    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新..." refreshingSpinner="circles"                           refreshingText="努力刷新数据中...">    </ion-refresher-content>  </ion-refresher>     <ul>      <li>        <dl>            写你自己的内容        </dl>      </li>     </ul>  <ion-label>数据已加载完成</ion-label>  <ion-infinite-scroll (ionInfinite)="loadMore($event)">    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="努力加载中..."></ion-infinite-scroll-content>  </ion-infinite-scroll></ion-content>

Pages can then listen to the refresher’s various output events. The refresh output event is fired when the user has pulled down far enough to kick off the refreshing process. Once the async operation has completed and the refreshing should end, call complete().
页面接着可以监听refresher的变化从而导出事件（events）.当开发者下拉足够距离的时候，这个refresh导出事件就完成自己的使命，被干掉了，被踢出refreshinng进程；一旦异步操作完成，refreshing就必须结束，调用complete()方法即可；

    refresh(refresher){        this.newsService.findByPage()            .subscribe(result=>{                this.newsList = result;                refresher.complete();            },(e)=>{            console.log(e,'初始化错误 error');            refresher.complete();        });    }

Note: Do not wrap the ion-refresher in a *ngIf. It will not render properly this way. Please use the enabled property instead to display or hide the refresher.
注意：不要把【ion-refresher】这个标签放到【*ngIf】.这会导致不能通过这种方式正确地渲染；请使用【enabled】属性来展示或者隐藏这个刷新器；

Usage//使用方法

<ion-content>  <ion-refresher (ionRefresh)="doRefresh($event)">    <ion-refresher-content></ion-refresher-content>  </ion-refresher></ion-content>

@Component({...})export class NewsFeedPage {  doRefresh(refresher) {    console.log('Begin async operation', refresher);    setTimeout(() => {      console.log('Async operation has ended');      refresher.complete();//刷新器结束关闭方法，注意不是close；这里是2000毫秒之后；    }, 2000);  }}

Refresher Content
刷新器内容
By default, Ionic provides the pulling icon and refreshing spinner that looks best for the platform the user is on. However, you can change the default icon and spinner, along with adding text for each state by adding properties to the child ion-refresher-content component.
默认情况下，Ionic 提供下拉图标和刷新指针，这样会看起来对开发者所在的平台最适宜；然而，你可以改变默认的图标和指针，并且可以给每个子刷新内容（ion-refresher-content）元件添加text文字；

<ion-content>  <ion-refresher (ionRefresh)="doRefresh($event)">    <ion-refresher-content      pullingIcon="arrow-dropdown"//下拉图标      pullingText="下拉刷新中..."//下拉可以看到的文字      refreshingSpinner="circles"//刷新指针：圆形刷新动态效果      refreshingText="Refreshing...">//刷新时显示的文字    </ion-refresher-content>  </ion-refresher></ion-content>

Further Customizing Refresher Content
更多的Refresher内容

The ion-refresher component holds the refresh logic. It requires a child component in order to display the content. Ionic uses ion-refresher-content by default. This component displays the refresher and changes the look depending on the refresher’s state. Separating these components allows developers to create their own refresher content components. You could replace our default content with custom SVG or CSS animations.
ion-refresher
【ion-refresher】元件拥有刷新logic.为了展示内容，它要求有一个子元件；逻辑默认使用【ion-refresher-content】这元件展示Refresher刷新器并且根据刷新的状态改变其外观；允许开发者分离这些元件；你可以替换掉默认的内容，换为用户的SVG或CSS动画；

Instance Members

cancel()
Changes the refresher’s state from refreshing to cancelling.
改变刷新的状态：从刷新（refreshing）到取消（cancelling）

complete()
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.
当你的异步操作已经完成，调用complete()方法；例如，刷新状态是app正在进行异步操作，例如从一个AJAX请求接收更多数据的时候；一旦数据接收完毕，你接着可以调用这个方法来表明（signify）:刷新器已经完成，并且即将关闭这个刷新器；这个方法还可以改变刷新器的状态，从refreshing状态到completing装填；

currentY
The current touch or mouse event’s Y coordinate.
表明目前的触屏或者鼠标的Y坐标（coordinate）

deltaY
The distance between the start of the pull and the current touch or mouse event’s Y coordinate.
在开始下拉处到目前触屏或鼠标的Y坐标下拉的距离；即δY，Y方向的距离差；

progress
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.
展示用户下拉了多少距离的数字；数字0代表用户还没有下拉到指定距离；数字1，并且任何大于1的数字，表示用户下拉到足够的距离，当你放开下拉的动作后，即将执行refresh这个刷新方法；如果放开下拉并且数字还是小于1，接着refresh刷新将不会发生；并且content内容页面会返回它原始的位置；

startY
The Y coordinate of where the user started to the pull down the content.
当用户开始下拉到content内容的Y坐标位置；

state
The current state which the refresher is in. The refresher’s states include:
refresher刷新器目前的状态；包括以下几种：

inactive - The refresher is not being pulled down or refreshing and is currently hidden.
刷新器没有被下拉或刷新但被隐藏；

pulling - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it’ll refresh.
用户启用了下拉刷新器，但是还没有到达起点和终点，就是在起点和终点之间，如果用户放手，它就会刷新；

cancelling - The user pulled down the refresher and let go, but did not pull down far enough to kick off the refreshing state. After letting go, the refresher is in the cancelling state while it is closing, and will go back to the inactive state once closed.
用户下拉刷新器，并且放手，但是还没有下拉足够的距离来改版刷新的装填，当放手的时候，它将关闭掉，刷新器会处于取消状态（cancelling），并且会一旦关闭其就会回到inactive状态；

ready - The user has pulled down the refresher far enough that if they let go, it’ll begin the refreshing state.
用户已经下拉刷新器足够的距离，如果放手，他会开始刷新状态；

refreshing - The refresher is actively waiting on the async operation to end. Once the refresh handler calls complete() it will begin the completing state.
刷新中已经启动，等待异步操作来结束，一旦刷新处理器调用complete()方法，他将处于competing状态；
completing - The refreshing state has finished and the refresher is in the process of closing itself. Once closed, the refresher will go back to the inactive state.
刷新器状态已经完成，并且刷新器处于关闭进程的装填；一旦关闭，刷新器会回到inactive状态；

从未启动到完成排列如下：

1. inactive(未启动，即未下拉，未刷新)======>
2. pulling(cancelling下拉中或取消中，未刷新)======>
3. ready（下拉动作已完成，未刷新）======>
4. refreshing（下拉动作完成，刷新中）======>
5. completing(下拉动作和刷新动作均全部完成)
   总之，这里把整个动作分成两个动作：下拉和刷新；
   其它还有输入属性，输出事件，sass变量等高级参数，只截图如下；
   

欢迎关注我的微信公众号：
【幕桥社区】