更新记录

1.0.6（2024-02-28）

• 更新 Circle 组件名称，防止与内置组件名冲突

1.0.5（2024-01-12）

• 优化 删除组件内无用日志输出

1.0.4（2024-01-10）

• 优化 兼容 uvue h5 项目

平台兼容性

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 Slot