WeUI Uniapp Design

Appearance

Loading 加载 ​

用于展示加载状态。支持行内加载图标、带文字加载和透明背景（适用于深色容器）。页面或列表底部加载请使用专门的 Loadmore 组件。

基础用法 ​

默认 type 为 default，渲染一个行内加载图标（.weui-loading），尺寸默认 20px。

查看代码
vue
<template>
  <weui-loading />
</template>

带文字 ​

通过 text 属性添加加载文字，文字位于图标右侧。

加载中
查看代码
vue
<template>
  <weui-loading text="加载中" />
</template>

不同尺寸 ​

通过 size 属性设置加载图标尺寸（单位 px）。

查看代码
vue
<template>
  <weui-loading :size="16" />
  <weui-loading :size="20" />
  <weui-loading :size="32" />
  <weui-loading :size="48" />
</template>

透明背景 ​

通过 transparent 属性切换为透明背景模式（追加 weui-loading_transparent 类），适用于深色容器。

查看代码
vue
<template>
  <div class="loading-dark-bg">
    <weui-loading :transparent="true" :size="32" />
  </div>
</template>

<style>
.loading-dark-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  background: #1a1a1a;
  border-radius: 4px;
}
</style>

自定义文字颜色 ​

通过 color 属性设置文字颜色。注意：WeUI 的 .weui-loading 使用内嵌 SVG 固定色，color 仅影响文字颜色，不影响图标颜色。

加载中
加载中
加载中
查看代码
vue
<template>
  <weui-loading text="加载中" color="#07C160" />
  <weui-loading text="加载中" color="#10AEFF" />
  <weui-loading text="加载中" color="#FA5151" />
</template>

插槽文字 ​

除 text 属性外，也可通过默认插槽传入文字内容。

自定义加载文字
查看代码
vue
<template>
  <weui-loading>自定义加载文字</weui-loading>
</template>

Attributes ​

参数说明类型默认值
size加载图标尺寸 pxnumber20
color文字颜色（不影响图标颜色）string'#999'
text加载文字string—
transparent透明背景模式booleanfalse

Slots ​

名称说明
default加载文字内容，与 text 属性二选一