Skip to content
iuiDesign
100%
02:32
本页目录

用于页面和区块的加载中状态,合适的加载动效会有效缓解用户的焦虑。

基本使用

用于展示加载中的状态。

html
<iui-spin></iui-spin>
<iui-spin></iui-spin>

尺寸

设置 size 可以得到不同尺寸的加载图标。默认为 16

html
<iui-spin :size="20"></iui-spin>
<iui-spin :size="20"></iui-spin>

添加描述

通过 tip 属性添加描述文案。

html
<iui-spin tip="This may take a while"></iui-spin>
<iui-spin tip="This may take a while"></iui-spin>

为容器上使用

可以给任意内容添加加载中状态。

html
<iui-spin :loading="true" tip="loading">
  <view style="width: 100%">
    <iui-card title="Card" extra="More" shadow>
      <p>Hi</p>
      <text> This is a container</text>
    </iui-card>
  </view>
</iui-spin>
<iui-spin :loading="true" tip="loading">
  <view style="width: 100%">
    <iui-card title="Card" extra="More" shadow>
      <p>Hi</p>
      <text> This is a container</text>
    </iui-card>
  </view>
</iui-spin>

API

<Spin>props
参数描述类型默认值
size尺寸大小Number16
color颜色String#3C7EFF
tip提示文字String-
loading是否显示 (受控)Booleanfalse
maskColor遮罩层颜色Stringrgba(255, 255, 255, 0.8)
fullScreen是否全屏显示Booleanfalse
<Spin>slots
插槽名描述参数
default容器元素-