# LoadingIcon 加载动画 
此组件为一个小动画,目前用在uv-ui的loadMore加载更多 (opens new window)等组件的正在加载状态场景。
# 平台兼容性
App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ |
# 基本使用
默认mode="spinner"
为经典类似花朵的形状
<template>
<uv-loading-icon></uv-loading-icon>
</template>
# 动画文字
text
可以指定文字内容,textSize
可以指定文字大小
<template>
<uv-loading-icon text="加载中" textSize="30rpx"></uv-loading-icon>
</template>
# 模式类型
通过mode
设定动画的类型,circle
为圆圈的形状,semicircle
为半圆圈的形状,spinner
为经典类似花朵的形状,默认spinner
注意
mode="spinner"
在nvue
中使用的是<loading-indicator>
,所以在nvue
中不是花朵的效果,而是weex
中默认的动画效果。
<template>
<view>
<uv-loading-icon mode="spinner" text="花朵形"></uv-loading-icon>
<uv-loading-icon mode="semicircle" text="半圆"></uv-loading-icon>
<uv-loading-icon mode="circle" text="圆型"></uv-loading-icon>
</view>
</template>
# 排列类型
vertical
可以指定文字和图标是否垂直排列,默认false
<template>
<view>
<uv-loading-icon :vertical="true" text="加载中"></uv-loading-icon>
</view>
</template>
# 动画模式
timing-function
可以指定mode
为semicircle
或circle
时动画里css中animation-timing-function
的属性,默认为ease-in-out
,更多详见 (opens new window)
<uv-loading-icon timing-function="linear"></uv-loading-icon>
# 动画运行时间
duration
可以指定动画的运行周期时间
<uv-loading-icon duration="2000"></uv-loading-icon>
# 图标颜色
color
可以指定动画活动区域的颜色, inactive-color
可以制定mode
为circle
时的暗边颜色
<template>
<view>
<uv-loading-icon color="red"></uv-loading-icon>
<uv-loading-icon mode="circle" inactive-color="red"></uv-loading-icon>
</view>
</template>
# 图标尺寸
通过size
设定尺寸,单位rpx,组件内把size
值体现为组件的宽和高
<uv-loading-icon size="36rpx"></uv-loading-icon>
# 显示或隐藏动画
通过show
设置为true
或false
,来显示或隐藏动画
<uv-loading-icon :show="true"></uv-loading-icon>
/* 等价于 */
<uv-loading-icon show></uv-loading-icon>
# API
# LoadingIcon Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
show | 是否显示动画 | Boolean | true | true | false |
color | 图标颜色 | String | #909193 | - |
textColor | 提示文本颜色 | String | #909193 | - |
vertical | 图标和文字是否垂直排列 | Boolean | false | true | false |
mode | 模式选择,见上方模式类型 | String | circle | spinner | circle | semicircle |
size | 加载图标的大小,默认单位px | String | Number | 24 | - |
textSize | 加载文字的大小,默认单位px | String | Number | 15 | - |
text | 文字内容 | String | - | - |
textStyle | 文字样式 | Object | - | - |
timingFunction | 指定animation-timing-function 的css属性,但只支持mode 为circle 或semicircle 才有效 | String | ease-in-out 更多详见 (opens new window) | - |
duration | 动画执行周期时间,单位ms | string | Number | 1200 | - |
inactiveColor | 图标的暗边颜色, mode 为circle 模式有效 | String | transparent | - |