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

slots

LoadingIndicator

独立的 Loading 三方块动画。

props

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>