# <refresh>

# Summary

<scroller>
  <refresh>
    <text>Refreshing...</text>
  </refresh>
  <div v-for="num in lists">
    <text>{{num}}</text>
  </div>
</scroller>

# Child Components

• Any other components, like the <text> and <image> components, can be put inside the refresh component.

• <loading-indicator>: This is a dedicated component which provides a default refresh animation effect, can only be used inside the <refresh> or the <loading> components.

<refresh>
  <text>Refreshing</text>
  <loading-indicator></loading-indicator>
</refresh>

# Attributes

• Support all common attributes;

#display

• show：The refresh animation will be started if a <loading-indicator> is included in the refresh component.

• hide：Collapse the refresh view. It also hides the <loading-indicator> and stops the loading animation if there's a <loading-indicator> included in the refresh component.

Note： The visibility of <refresh> component can be controlled by display attribute with the value show and hide. A display="show" should always be paired with a display="hide" statement.

# Styles

• Please check out the common styles

# Events

#refresh

• Triggered when the scroller or list is pulled down.

#pullingdownv0.6.1+

• Triggered when the scroller or list is pulled down. The attributes dy, pullingDistance, viewHeight and type are accessible from the event object :

• dy : The offset between two scroll actions

• pullingDistance : The distance of pulling

• viewHeight : The height of refreshView

• type : "pullingdown" constant string type for this event

  <refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
    <text>Refreshing ...</text>
    <loading-indicator></loading-indicator>
  </refresh>

# Example

• Complete example goes here