# <loading>

# Summary

WARNING

The <loading> Component provide a pullup to loading function for some special containers, its usage and attributes are similar to the <refresh> Component.

Note： To be rendered properly, the <loading> Component must appear inside the special Component such as <scroller>、<list>、<hlist>、<vlist>、<waterfall>.

<scroller>
  <div v-for="num in lists">
    <text>{{num}}</text>
  </div>
  <loading>
    <text>Loading</text>
  </loading>
</scroller>

# Child Components

Any other components, like the <text> and <image> components, can be put inside the loading component.
<loading-indicator>: This is a dedicated component which provides a default loading animation effect, can only be used inside the <refresh> or the <loading> components.

<loading>
  <text>Loading</text>
  <loading-indicator></loading-indicator>
</loading>

# Attributes

Support all common attributes.

Attribute	Type	Value	Default Value
`display`	String	show / hide	show

#`display`

show：The loading animation will be started if a <loading-indicator> is included in the loading component.
hide：Collapse the loading view. It also hides the <loading-indicator> and stops the loading animation if there's a <loading-indicator> included in the loading component.

Note： The visibility of <loading> 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

#`loading`

Triggered when the scroller or list is pulled up.

<loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
  <text>Loading ...</text>
  <loading-indicator></loading-indicator>
</loading>

# Vue Example

Complete example goes here

# <loading>

# Summary

# Child Components

# Attributes

#display

# Styles

# Events

#loading

# Vue Example

#`display`

#`loading`