更新记录

0.0.2(2024-04-05)

  • feat: 支持 uniapp x ios(app-js)

0.0.1(2023-10-13)

  • 首次上传

平台兼容性

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

lime-loading 加载中

  • uniapp vue3 用于表示页面或操作的加载状态,给予用户反馈的同时减缓等待的焦虑感,由一个或一组反馈动效组成。
  • Q群 719441207

使用

  • 导入插件后直接使用
  • 更多示例请看下方说明
  • uniappx: ios需要hbx 4.11,安卓需要hbx 4.0。 uniapp不限版本。

基础

通过 type 属性可以设置加载图标的类型,默认为 circular,可选值为 spinner。nvue只有circular,因为其使用的是原生组件。

<l-loading />
<l-loading type="spinner"/>

横向文字

通过text插槽设置加载文本,uvue建议使用text

<l-loading>加载中…</l-loading>
<l-loading text="加载中…"></l-loading>

竖向文字

<l-loading :vertical="true">加载中…</l-loading>

尺寸

通过 size 属性设置加载图标的大小,默认单位为 px, uvue必须带单位。

<l-loading size="40rpx"></l-loading>
<l-loading size="60rpx"></l-loading>

颜色

通过 color 属性设置加载图标的颜色。

<l-loading color="red" ></l-loading>

查看示例

  • 导入后直接使用这个标签查看演示效果
<!-- // 代码位于 uni_modules/lime-loading/compoents/lime-loading -->
<lime-loading />

插件标签

  • 默认 l-loading 为 component
  • 默认 lime-loading 为 demo

关于vue2的使用方式

  • 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
  • 关键代码是: 在main.js中 在vue2部分加上这一段即可.
    // vue2
    import Vue from 'vue'
    import VueCompositionAPI from '@vue/composition-api'
    Vue.use(VueCompositionAPI)

API

Props

参数 说明 类型 默认值
color 颜色 string ``
type 类型,可选值为 spinner string circular
size 加载图标大小,默认单位为 px,uvue只支持string number | string 40rpx
text 加载文本 string -
textColor 文本颜色 string -
textSize 文本大小 px,uvue只支持string number | string -
vertical 是否垂直排列图标和文字内容 boolean false

Slots

名称 说明
default 加载文案

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式。uvue和nvue不支持!

名称 默认值 描述
--l-loading-color #1677ff -
--l-loading-text-color rgba(0,0,0,0.45) -
--l-loading-font-size 28rpx -
--l-loading-duration 2s -

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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