Loading 加载

17:06

说明

轻量加载动画，提供 circle（圆环旋转）与 flower（花朵）两种模式，尺寸、活动色与非活动色均可配置，常用于 ux-loadmore、ux-switch 等组件的加载态。show=false 会直接卸载节点并停止动画。

兼容性

平台	支持情况
App	✅ 支持（flower 模式退化为主题浅色实心圆点；根节点为块级 flex，不与文字同行内联）
H5	✅ 支持
微信小程序	✅ 支持（旋转由 CSS @keyframes 驱动，非 UniElement.animate）

示例

基础用法

默认圆圈模式，自动旋转。

查看源码

<template>
    <view class="demo">
        <ux-loading />
    </view>
</template>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

模式切换 mode

mode="circle" 为圆圈模式，mode="flower" 为花朵模式。

查看源码

<template>
    <view class="demo">
        <ux-loading :mode="mode" />
    </view>
    <view class="btns">
        <ux-button size="small" :type="mode === 'circle' ? 'primary' : 'default'" @click="mode = 'circle'">circle</ux-button>
        <ux-button size="small" :type="mode === 'flower' ? 'primary' : 'default'" @click="mode = 'flower'">flower</ux-button>
    </view>
</template>

<script setup lang="uts">
const mode = ref<'circle' | 'flower'>('circle');
</script>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
.btns {
    display: flex;
    flex-direction: row;
}
</style>

颜色配置 color

color 只对圆圈模式有效，用于设置活动区域的颜色。

查看源码

<template>
    <view class="demo">
        <ux-loading mode="circle" color="#2979ff" />
    </view>
</template>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

尺寸配置 size

通过 size 设置加载图标的大小，单位 px。

查看源码

<template>
    <view class="demo">
        <ux-loading :size="20" />
    </view>
</template>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

显示/隐藏 show

show=false 时隐藏加载动画。

查看源码

<template>
    <view class="demo">
        <ux-loading v-if="show" />
        <text v-else>加载已完成</text>
    </view>
    <ux-button size="small" :type="show ? 'primary' : 'default'" @click="show = !show">切换显示</ux-button>
</template>

<script setup lang="uts">
const show = ref<boolean>(true);
</script>

<style scoped>
.demo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
</style>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
mode	动画的类型，circle-圆圈，flower-花朵	LoadingMode	'circle'	-
color	动画活动区域的颜色，只对 mode = circle 模式有效	string	''	-
inactiveColor	圆环非活动边（静止三边）的颜色，默认主题 divider 色，只对 mode = circle 模式有效	string	''	-
size	加载图标的大小，单位px	string | number	'17'	-
show	是否显示动画	boolean	true	-

Events

ux-loading 无事件。

Slots

ux-loading 无插槽。

注意事项

1. color 与 inactive-color 只对 circle 模式生效；flower 模式的颜色由样式表内置的 SVG 决定，传色无效。
2. App 端 flower 模式不支持 SVG 背景图，会退化成一个主题浅色实心圆点（H5 / 微信小程序正常显示花朵）。
3. 旋转动画实现分端：App / H5 走 UniElement.animate，微信小程序不支持该 API，改由 CSS @keyframes 驱动；两端视觉一致但实现不同。
4. 根节点显示方式不同：App 端为 display:flex（块级 17px 方块），H5 / 小程序为 inline-flex + vertical-align:middle，可与文字同行内联；App 端需自行用 flex 容器居中。
5. size 同时决定宽高，传数值按 px 处理（组件内部走 addUnit）。
6. show=false 时组件 v-if 卸载节点并取消动画，重新显示会重新挂载并重启动画。