# <loading>

# Summary


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


  <div v-for="num in lists">

# 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.



# Attributes

  • Support all common attributes.
AttributeTypeValueDefault Value
displayStringshow / hideshow


  • 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

# Events


  • Triggered when the scroller or list is pulled up.
<loading @loading="onloading" :display="loadinging ? 'show' : 'hide'">
  <text>Loading ...</text>

# Vue Example

  • Complete example goes here
Last Updated: 8/15/2022
Excellent docUnusable doc