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:默认占位,内容,如果需要支持自定义 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>
阿里云首页 移动开发平台 mPaaS 相关技术圈