全部产品

Loading 加载指示

更新时间:2020-11-30 15:49:32

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>