Loading 加载

点击扫码预览

23:47



---

组件名：rice-loading

演示示例可扫模拟器状态栏上的二维码预览或 点击在线预览

用于表示加载中的过渡状态。

加载类型

通过 mode 属性定义加载类型，默认 circular，可选 circle、semicircle、 spinner 。

<rice-loading />
<rice-loading mode="circle" />
<rice-loading mode="semicircle" /> 
<rice-loading mode="spinner" />

注意

mode 为 circular 时，APP端和h5/小程序之间有样式差异。
mode 为 circle 和 semicircle 时在iOS和部分低端Android手机上有bug。详见 uniappx issues

自定义颜色

通过 color 属性设置图标的颜色。

<rice-loading color="#a827f7"/>
<rice-loading mode="circle" color="#67c23a" />
<rice-loading mode="semicircle" color="#ee0a24"/>
<rice-loading mode="spinner" color="#ed6a0c"/>

自定义大小

通过 size 属性设置图标的大小，单位支持 px 和 rpx。

<rice-loading size="30"/>
<rice-loading mode="circle" size="30"/>
<rice-loading mode="semicircle" size="30"/>
<rice-loading mode="spinner" size="30"/>

加载文案

通过 text 属性 或 默认插槽在图标右侧插入加载文案。

<rice-loading text="加载中…" />
<rice-loading mode="circle">加载中…</rice-loading>

垂直排列

设置 vertical 属性后，图标和文案会垂直排列。

<rice-loading text="加载中…" vertical />
<rice-loading mode="circle" vertical>加载中…</rice-loading>

文案颜色

通过 color 或者 text-color 属性设置加载文案的颜色。

<!-- 可修改文案和图标的颜色 -->
<rice-loading text="加载中…" color="#a827f7" vertical />
<!-- 只修改文案颜色 -->
<rice-loading mode="circle" text-color="#aaaaac" vertical>加载中…</rice-loading>

动画类型

通过 timing-function 属性设置加载动画的类型，mode 为 circle 和 semicircle 时才有效，默认为 ease-in-out，可选值见 TimingFunction。

<rice-loading mode="circle" timing-function="linear" />
<rice-loading mode="semicircle" timing-function="linear" />

自定义图标

通过 icon 插槽可以自定义加载图标。

<rice-loading>
  <template #icon>
    <rice-icon name="like" size="26" color="#f56c6c" />
  </template>
</rice-loading>
<rice-loading>
  <template #icon>
    <image src="/static/images/logo.png" class="icon-img"></image>
  </template>
</rice-loading>

API

Props

参数	说明	类型	默认值
mode	加载类型，可选 圆 circle、半圆 semicircle、雪花 spinner	string	circular
color	颜色	string	primary color
inactive-color	图标的暗边颜色, mode为circle 时有效，默认会根据 color 的值自动计算	string	-
size	大小，单位支持 px 和 rpx	string|number	24px
text	加载文案	string|number	-
text-color	文案颜色，默认和color 一致	string	-
text-size	文案大小 ，单位支持 px 和 rpx	string|number	14px
vertical	是否垂直排列图标和文字内容	boolean	false
timing-function	指定动画类型，mode为circle 和 semicircle 时有效，可选值见TimingFunction	string	ease-in-out
custom-style	自定义style	object	-

TimingFunction Options

属性值	说明
ease	缓入快出（结束时减速）
ease-in	仅缓入（开始慢，逐渐加速）
ease-out	仅缓出（开始快，逐渐减速）
ease-in-out	缓入缓出（两头慢，中间快）
linear	匀速运动

Slots

名称	说明
default	加载文案
icon	加载图标

类型定义

组件导出如下类型

import {LoadingMode, LoadingTimingFunction,LoadingProps } from '@/uni_modules/rice-ui'
// 组件类型
const loadingRef = ref<RiceLoadingComponentPublicInstance | null>(null)