uni-loading 动画加载

动画加载组件使用场景非常多，如在页面内数据加载时，提供一个loading动画，列表的上拉加载，下拉刷新中也需要加载动画。

注意：当前版本只支持 uni-app x

使用组件

基本用法

在 template 中使用组件，独立显示加载图标和加载文本

<!-- 只显示加载图标 -->
<uni-loading></uni-loading>
<!-- 自定义加载图标颜色 -->
<uni-loading color="#409EFF"></uni-loading>
<!-- 修改加载图标大小 -->
<uni-loading :size="30"></uni-loading>
<!-- 修改加载图标类型 ： 当前只支持 circle-->
<uni-loading type="circle"></uni-loading>

覆盖元素的加载动画

在 template 中使用组件，在原始布局元素上面覆盖遮罩和加载动画

<uni-loading type="circle">
	<text>第一行文本</text>
	<text>第二行文本</text>
	<text>第三行文本</text>
</uni-loading>

注意：原理是在原始元素外增加一层 view 节点，可能会影响页面布局，如发生布局影响，直接在 上修改样式即可，结构等同于：

<view class="uni-loading">
	<text>第一行文本</text>
	<text>第二行文本</text>
	<text>第三行文本</text>
</view>

取消加载动画

使用 loading 属性可以关闭加载动画，为了优化组件性能，建议组件在页面不可见时，设置 loading:false，关闭加载动画

<uni-loading :loading="false"></uni-loading>

属性/方法

Loading Props

属性名	类型	默认值	说明
loading	Boolean	true	是否显示加载动画
type	String	circle	加载图标显示类型，当前只支持circle,其他类型或者自定义获取提供

|background |String |rgba(255,255,255,0.6) |加载动画遮罩颜色 | |color |String |#333333 |加载图标以及加载文字颜色 | |size |Number |20 |加载图标大小 | |text |String |- |加载文本 |

Loading Slot

插槽名	说明
default	默认插槽