更新记录

1.0.6(2024-02-28) 下载此版本

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

1.0.5(2024-01-12) 下载此版本

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

1.0.4(2024-01-10) 下载此版本

  • 优化 兼容 uvue h5 项目
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.97 app-uvue × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

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,其他类型或者自定义获取提供
<!-- iconType String loop 自定义图标类型,值详见uni-icons -->
background String rgba(255,255,255,0.6) 加载动画遮罩颜色
color String #333333 加载图标以及加载文字颜色
size Number 20 加载图标大小
text String - 加载文本

Loading Slot

插槽名 说明
default 默认插槽

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问