Loading 加载指示

Loading 加载指示文档介绍了使用该组件的不同方式以及 API 文档：

• 在 Kylin 工程中使用该组件。
• 在其他工程中使用，通过 ESModule 的方式导入组件。
• API 文档 提供了 props、slots 的接口信息。

Kylin

   

    
<dependency component="{ Loading, LoadingIndicator }" src="@alipay/antui-vue" ></dependency>
   

ESModule

   

    
import { Loading, LoadingIndicator } from '@alipay/antui-vue';
   

API 文档

Loading

封装过的 Loading，包括全页面加载、页脚加载等。

props

属性	说明	类型	默认值
type	Loading类型，可选值为""，"page"，"refresh"，"nomore"	String	""

slots

name	说明	scope
-	默认占位，内容，如果需要支持自定义 DOM	—-

LoadingIndicator

独立的 Loading 三方块动画。

props

属性	说明	类型	默认值
white	是否显示为白色方块，默认蓝色	boolean	false
tiny	是否显示小尺寸	boolean	false

Demo

• 独立加载状态
• 页面中部加载
• 页面顶部加载
• 页面底部加载
• 没有更多

独立加载状态

截图

代码

   

    
<template>
    

    
  <div style="text-align: center; background: #999;">
    
    <LoadingIndicator />
    
    <br/>
    
    <LoadingIndicator white />
    
    <br/>
    
    <LoadingIndicator tiny />
    
    <br/>
    
    <LoadingIndicator tiny white />
    
  </div>
    

    
</template>
   

页面中部加载

截图

代码

   

    
<template>
    
  <div style="min-height: 300px;">
    
    <Loading type="page">加载中</Loading>
    
  </div>
    
</template>
   

页面顶部加载

截图

代码

   

    
<template>
    

    
  <Loading type="refresh">上次更新 2016-06-23 11:47</Loading>
    

    
</template>
   

页面底部加载

截图

代码

   

    
<template>
    

    
  <div>
    
    <div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
    
    <Loading >加载中...</Loading>
    
  </div>
    

    
</template>
   

没有更多

截图

代码

   

    
<template>
    

    
  <div>
    
    <div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
    
    <Loading type="nomore">没有更多了</Loading>
    
  </div>
    

    
</template>