如何设置小程序加载Loading_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

用于提示局部或页面在加载中。

属性

属性	类型	默认值	说明
className	string	-	类名
color	string	'#999'	加载时的颜色，当 type 为 'spin' 时，只支持十六进制颜色码，如 '#fff'
delay	number	-	延时显示加载状态，单位 ms，注意，delay 的变更不能实时生效，当 type 为 'spin' 时生效
height	string	'200rpx'	加载图标高度，不传则默认与 size 大小一致，当 type 为 'mini' 时生效
loading	boolean	true	是否加载中，当 type 为 'spin' 时生效
miniSize	string	'200rpx'	加载图标宽度，当 type 为 'mini' 时生效
size	'x-large' \| 'large' \| 'medium' \| 'small'	"medium"	加载图标尺寸，当 type 为 'spin' 时生效
text	string	-	加载中文案，当 type 为 'spin' 时生效
theme	'dark' \| 'light'	"dark"	颜色。dark 为深色，light 为浅色，当 type 为 'spin' 时生效
type	'spin' \| 'mini'	'spin'	加载样式类型

插槽

名称	说明
indicator	自定义加载中的指示器，type 为 'spin' 时生效
text	自定义 text，type 为 'spin' 时生效

样式类

以下样式类只在对应type下才会被使用

类名	说明
amd-loading	整体样式
amd-loading-spin-container	外层容器样式
amd-loading-spin	内层容器样式
amd-loading-spin-dark	深色模式样式
amd-loading-spin-light	浅色模式样式
amd-loading-spin-icon	加载图标外层样式
amd-loading-spin-icon-indicator	自定义加载图标外层样式
amd-loading-spin-icon-small	加载图标样式
amd-loading-spin-icon-medium	加载图标样式
amd-loading-spin-icon-large	加载图标样式
amd-loading-spin-icon-x-large	加载图标样式
amd-loading-spin-text	加载文案样式
amd-loading-spin-text-dark	深色模式下加载文案样式
amd-loading-spin-text-light	浅色模式下加载文案样式
amd-loading-mini-container	外层容器样式
amd-loading-mini	外层容器样式
amd-loading-mini-item	所有加载点的样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo">
  <demo-block title="基础用法" padding="0">
    <loading type="mini"></loading>
  </demo-block>
  <demo-block title="主题色 Loading"  padding="0">
    <loading type="mini" color="#1677ff"></loading>
  </demo-block>
  <demo-block title="spin">
    <loading type="spin" size="x-large" text="x-large" />
    <loading type="spin" size="large" text="large" />
    <loading type="spin" size="medium" text="medium" />
    <loading type="spin" size="small" text="small" />
  </demo-block>
  <demo-block title="浅色spin" background="rgba(0, 0, 0, 0.7)">
    <loading size="x-large" text="x-large" theme="light" />
    <loading size="large" text="large" theme="light" />
    <loading size="medium" text="medium" theme="light" />
    <loading size="small" text="small" theme="light" />
  </demo-block>
  <demo-block title="自定义颜色">
    <loading size="x-large" text="x-large" color="#ff0000" />
    <loading size="large" text="large" color="#ff0000" />
    <loading size="medium" text="medium" color="#ff0000" />
    <loading size="small" text="small" color="#ff0000" />
  </demo-block>
  <demo-block title="延迟3000ms出现">
    <loading  delay="{{3000}}" />
  </demo-block>
  <demo-block title="自定义图标">
    <loading text="自定义图标">
      <am-icon slot="indicator" type="HeartFill" />
    </loading>
  </demo-block>
</view>

index.js 的代码示例如下：

Page({ });

index.json 的代码示例如下：

{
  "defaultTitle": "Loading",
  "usingComponents": {
    "loading": "antd-mini/es/Loading/index",
    "am-icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}