Loading 加载动画

此组件为一个小动画,目前用在uView的loadmore加载更多switch开关等组件的正在加载状态场景。

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

通过mode设定动画的类型,circle为圆圈的形状,flower为经典类似花朵的形状

  1. <template>
  2. <view>
  3. <u-loading mode="circle"></u-loading>
  4. <u-loading mode="flower"></u-loading>
  5. </view>
  6. </template>

动画颜色

color可以指定动画活动区域的颜色

  1. <u-loading color="red"></u-loading>

动画尺寸

通过size设定尺寸,单位rpx,组件内把size值体现为组件的宽和高

  1. <u-loading size="36"></u-loading>

显示或隐藏动画

通过show设置为truefalse,来显示或隐藏动画

  1. <u-loading :show="true"></u-loading>
  2. /* 等价于 */
  3. <u-loading show></u-loading>

API

Props

参数说明类型默认值可选值
mode模式选择,见上方说明Stringcircleflower
color动画活动区域的颜色,只对 mode = circle 模式有效String#c7c7c7-
size加载图标的大小,单位rpxString | Number34-
show是否显示动画Booleantruefalse