loading 加载状态

引入

全局引入，在miniprogram根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-loading": "@retailwe/ui-loading/index"
}

代码演示

基础用法

<wr-loading></wr-loading>

包含文字

<wr-loading>加载中</wr-loading>

文字显示在loading下方

<wr-loading vertical>加载中</wr-loading>

loading类型

<wr-loading>circular</wr-loading>
<wr-loading type="spinner">spinner</wr-loading>

指定size

<wr-loading size="40rpx"></wr-loading>
<wr-loading size="60rpx"></wr-loading>

指定文字size

<wr-loading text-size="24rpx">加载中</wr-loading>
<wr-loading text-size="32rpx">加载中</wr-loading>

指定颜色

<wr-loading></wr-loading>
<wr-loading color="blue"></wr-loading>
<wr-loading color="red"></wr-loading>

API

loading Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |-----------|-----------|-----------|-------------|-------------| | type | 类型，可选值circular, circular-ext, spinner | string | circular | - | | vertical | 文字是否显示在loading下方 | boolean | false | - | | size | loading的大小 | string | 50rpx | - | | textSize | 文字的大小 | string | 24rpx | - | | color | loading的颜色 | string | #c8c9cc | - | | backgroundColor | loading背景色，circular-ext必填 | string | - | - | | reverse | 反向旋转 | boolean | false | - | | duration | 动画循环一次的时间，决定动画速度 | number | 0.8 | - | | paused | 暂停动画 | boolean | false | - |

Slots

| 名称 | 说明 | | --- | --- | | - | 加载文案 |

loading 外部样式类

外部样式类

| 类名 | 说明 | |-----------|-----------| | wr-class | 根节点样式类 |