uv-ui

# LoadingIcon 加载动画

✈

组件名：uv-loading-icon

点击下载&安装 (opens new window)

此组件为一个小动画，目前用在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>

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# 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 -

← LoadingPage 加载页 →