全部产品
云市场
云游戏

Loading 加载指示

更新时间:2020-08-07 20:28:58

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

  • Kylin 工程中使用该组件。
  • 在其他工程中使用,通过 ESModule 的方式导入组件。

API 文档 提供了 props、slots 的接口信息。

Kylin

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

ESModule

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

独立加载状态

截图

代码

  1. <template>
  2. <div style="text-align: center; background: #999;">
  3. <LoadingIndicator />
  4. <br/>
  5. <LoadingIndicator white />
  6. <br/>
  7. <LoadingIndicator tiny />
  8. <br/>
  9. <LoadingIndicator tiny white />
  10. </div>
  11. </template>

页面中加载

截图

代码

  1. <template>
  2. <div style="min-height: 300px;">
  3. <Loading type="page">加载中</Loading>
  4. </div>
  5. </template>

页面顶部加载

截图

代码

  1. <template>
  2. <Loading type="refresh">上次更新 2016-06-23 11:47</Loading>
  3. </template>

页面底部加载

截图

代码

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

没有更多

截图

代码

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