< 文档首页
全部产品
弹性计算
存储
数据库
安全
大数据
人工智能
网络与CDN
视频服务
容器与中间件
开发与运维
API与工具
物联网
物联网行业方案
专有云
企业应用与服务
数字金融
域名与网站
工商财税与知识产权
钉钉
移动研发平台EMAS-专有云
解决方案
会员服务
更多

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

    页面中部加载

    截图

    代码

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

    页面顶部加载

    截图

    代码

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

    页面底部加载

    截图

    代码

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

    没有更多

    截图

    代码

    1. <template>
    3.   <div>
    4.     <div style="color:#F4333C;background-color: #fff; text-align: center; height: 300px;">内容显示区域</div>
    5.     <Loading type="nomore">没有更多了</Loading>
    6.   </div>
    8. </template>
    上一篇：Input 输入框
    下一篇：Message 信息状态
    相关文档
    相关产品
    • 移动开发平台 mPaaS
      移动开发平台（Mobile PaaS，简称 mPaaS）是源于支付宝 App 的移动开发平台，为移动开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动 App。
    • 金融分布式架构 SOFAStack
      SOFAStack™（Scalable Open Financial Architecture Stack）包含构建金融级云原生架构所需的各个组件，也是在金融场景里锤炼出来的最佳实践。提供微服务应用开发、部署发布、监控运维、项目管理、容灾高可用等全栈式解决方案，并兼容Dubbo、Spring Cloud等微服务运行环境，提供基于虚拟机的经典PaaS运维和基于Kubernetes的云原生运维能力，助力客户各类应用轻松转型分布式和云原生架构。
    • 移动推送
      移动推送（Mobile Push）是提供给移动开发者的移动端消息推送服务，通过在App中集成推送功能，进行高效、精准、实时的消息推送，从而使业务及时触达用户，提高用户粘性。