此组件为一个小动画,目前用在uView的loadMore加载更多等组件的正在加载状态场景。
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
通过mode
设定动画的类型,circle
为圆圈的形状,flower
为经典类似花朵的形状
<template>
<view>
<u-loading-icon></u-loading-icon>
</view>
</template>
copy
text
可以指定文字内容?textSize
可以指定文字大小
<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
copy
mode
可以指定模式
<u-loading-icon text="花朵形"></u-loading-icon>
<u-loading-icon mode="semicircle" text="半圆"></u-loading-icon>
<u-loading-icon mode="circle" text="圆型"></u-loading-icon>
copy
vertical
可以指定文字和图标是否垂直排列
<u-loading-icon :vertical="true"></u-loading-icon>
copy
timing-function
可以指定mode
为semicircle
或circle
时动画里css中animation-timing-function
的属性,默认为ease-in-out
<u-loading-icon timing-function="linear"></u-loading-icon>
copy
duration
可以指定动画的运行周期时间
<u-loading-icon duration="2000"></u-loading-icon>
copy
color
可以指定动画活动区域的颜色,?inactive-color
可以制定mode
为circle
时的暗边颜色
<u-loading-icon color="red"></u-loading-icon>
<u-loading-icon mode="circle" inactive-color="red"></u-loading-icon>
copy
通过size
设定尺寸,单位rpx,组件内把size
值体现为组件的宽和高
<u-loading-icon size="36"></u-loading-icon>
copy
通过show
设置为true
或false
,来显示或隐藏动画
<u-loading-icon :show="true"></u-loading-icon>
/* 等价于 */
<u-loading-icon show></u-loading-icon>