外观
Loading 加载动画
约 726 字大约 2 分钟
2025-10-31
此组件为一个小动画,目前用在uView的loadMore加载更多等组件的正在加载状态场景。
基本使用
通过mode设定动画的类型,circle为圆圈的形状,flower为经典类似花朵的形状
<un-loading></un-loading>动画文字
text可以指定文字内容 textSize可以指定文字大小
<un-loading text="加载中" textSize="18"></un-loading>模式类型
mode可以指定模式为circle、spinner、spinner-image、semicircle
spinner-image 和spinner效果一样,区别是spinner-image是使用图片实现(不支持改变颜色),spinner使用view实现,spinner-image性能优于spinner
<un-loading text="花朵形"></un-loading>
<un-loading mode="semicircle" text="半圆"></un-loading>
<un-loading mode="circle" text="圆型"></un-loading>排列类型
vertical可以指定文字和图标是否垂直排列
<un-loading :vertical="true"></un-loading>动画模式
timing-function可以指定mode为semicircle或circle时动画里css中animation-timing-function的属性,默认为ease-in-out
<un-loading timing-function="linear"></un-loading>动画运行时间
duration可以指定动画的运行周期时间
<un-loading duration="2000"></un-loading>图标颜色
color可以指定动画活动区域的颜色, inactive-color可以制定mode为circle时的暗边颜色
<un-loading color="red"></un-loading>
<un-loading mode="circle" inactive-color="red"></un-loading>图标尺寸
通过size设定尺寸,单位rpx,组件内把size值体现为组件的宽和高
<un-loading size="36"></un-loading>显示或隐藏动画
通过show设置为true或false,来显示或隐藏动画
<un-loading :show="true"></un-loading>
/* 等价于 */
<un-loading show></un-loading>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show | 是否显示动画 | Boolean | true |
| color | 图标颜色,支持使用主题色 | String | - |
| textColor | 提示文本颜色,支持使用主题色 | String | - |
| vertical | 图标和文字是否垂直排列 | Boolean | false |
| mode | 模式选择,见上方说明 | Enum | spinner-image |
| size | 加载图标的大小,单位px | String | Number | 24 |
| textSize | 加载文字的大小,单位px | String | Number | 15 |
| text | 文字内容 | String | - |
| timingFunction | 指定animation-timing-function的css属性,但只支持mode为circle或semicircle才有效 | String | ease-in-out |
| duration | 动画执行周期时间,单位ms | string | Number | 1200 |
| inactiveColor | 图标的暗边颜色, mode为circle 模式有效 | String | transparent |
Scss 变量
| 变量名 | 默认值 | 说明 |
|---|---|---|
| $un-loading-color | #c8c9cc | 加载动画颜色 |
| $un-loading-text-margin-left | 6px | 加载动画文字左边距 |
| $un-loading-text-margin-top | 8px | 加载动画文字上边距 |
| $un-loading-text-color | $text-color-muted | 加载动画文字颜色 |
| $un-loading-text-font-size | $text-base | 加载动画文字大小 |
| $un-loading-text-line-height | $line-base | 加载动画文字行高 |
提示
组件内部默认使用 scss 变量,如需修改,请查看 scss 变量使用 文档
