LuLu UI Edge版中文文档 » Loading加载

教程

Loading加载

安装与调用

loading效果支持以插件形式单独使用,引入下面CSS即可:

<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui/Loading.css">

如果想要使用loading增强功能,可以引入下面的JS文件(非必须):

<script src="https://unpkg.com/lu2/theme/edge/js/common/ui/Loading.js"></script>

本组件为web-components,引用时需添加type="module",也可采用如下方式进行引用:

<script type="module">
    import 'https://unpkg.com/lu2/theme/edge/js/common/ui/Loading.js';
</script>

如果是npm安装调用,则:

import 'lu2/theme/edge/css/common/ui/Loading.css';
import 'lu2/theme/edge/js/common/ui/Loading.js';

如果 JS import语法报错,试试在业务代码中动态引入。

import('lu2/theme/edge/js/common/ui/Loading.js');

自定义loading元素

图形loading-内联

跟随文本-正常尺寸:

<ui-loading></ui-loading>

跟随文本-较大尺寸:

<ui-loading size="3"></ui-loading>

跟随文本-自定义颜色:

<ui-loading style="--color: pink"></ui-loading>

图形loading-块级

单行呈现-正常尺寸:

<ui-loading rows="5"></ui-loading>

单行呈现-较大尺寸:

<ui-loading rows="5" size="3"></ui-loading>

单行呈现-较大尺寸-自定义颜色:

<ui-loading rows="5" size="3" style="--color: #ff0000"></ui-loading>

其中:

rows
表示loading提示元素的行数,和<textarea>元素应用,会有对应的高度表现,最大值是15
如果我们想要手动设置<ui-loading>元素的高度,可以类似下面这样处理:
<ui-loading class="some-classname" rows="auto"></ui-loading>
.some-classname {
    height: 88px;
}
size
表示loading圈圈图形的大小。目前支持size范围是1-4,默认值是2

其中:

  • size="1"对应宽高10px;
  • size="2"或者不设置size属性对应宽高20px;
  • size="3"对应宽高30px;
  • size="4"对应宽高40px。
--color
表示loading圈圈图形的颜色。未设置默认为蓝色,设置了则覆盖。

文本打点loading

正在加载中

<ui-dot></ui-dot>

支持is-dot属性设置,例如:

正在加载中<q is-dot></q>

正在加载中

图文loading并存

正在加载中 正在加载中 正在加载中 正在加载中
<ui-loading rows="5">正在加载中<ui-dot></ui-dot></ui-loading>

普通元素呈现loading

多用在使用JavaScript动态处理交互效果的场景下。

<div class="ui-loading" style="height: 100px;"></div>

普通元素的loading效果通过添加类名.ui-loading实现。支持简单的提示文本,例如:

正在加载中
<div class="ui-loading" style="height: 100px;">正在加载中<ui-dot></ui-dot></div>

如果引入Loading.js,可以使用element.loading = true方法进行loading样式的添加。

Loading效果JS增强

Loading.js主要做了下面体验增强的事情:

  1. 扩展了loading属性。可以设置按钮,或者其他元素为loading状态,可以取消loading状态,以及获取当前元素是否处于loading状态。
  2. 扩展了自定义元素<ui-loading>的size和rows属性。支持size和rows属性的获取和设置。即dom.size=4,元素的size属性值也会跟着改变,也可以直接dom.size获取设置的size属性值。

注意:使用自定义元素<ui-loading>的size和rows属性时,需将代码放在带有type="module"的脚本中。

设置按钮loading

button.addEventListener('click', function () {
    this.loading = true;
    // 一段时间后loading效果去除
    setTimeout(() => {
        this.loading = false;
    }, 2000);
});

设置普通元素loading

例如下面这种“加载更多”按钮交互。

加载更多
.loading-more-a {
    display: block;
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd;
    text-align: center;
    color: gray;
}
<a href="javascript:" class="loading-more-a" role="button">加载更多</a>
button.addEventListener('click', function () {
    this.loading = true;
});

实际开发,建议先清除按钮元素里面的文本内容,再执行button.loading = true

当然,我们也可以直接把子元素替换为<ui-loading>元素。例如:

加载更多
button.addEventListener('click', function () {
    this.innerHTML = '<ui-loading></ui-loading>';
});

全局loading

当你想要一个全局的loading并且始终居中显示的时候,就可以使用下面的代码创建一个全局的loading。

document.loading = true;

如果你想隐藏全局的loadng,设置下面代码即可:

document.loading = false;

如果你想使用自定义的loading文案,可以通过传递字符串值实现(支持HTML标签)。

document.loading = '我是自定义loading文案';

如果你想使用自定义的分段提示文案,可以通过传递数组实现。

document.loading = ['我是分段自定义loading文案', '我是依旧是分段自定义loading文案'];

语法和参数

// 是否正在loading
const isLoading = element.loading;
// 是否正在全局loading
const isGlobalLoading = document.loading;
// 设置元素loading
element.loading = true;
// 取消loading效果
element.loading = false;
// 获取<ui-loading>元素的size值
let size = element.size;
// 修改<ui-loading>元素的size值
element.size = 3;

经测试,不会和浏览器IMG元素和IFRAME元素的原生loading属性相冲突。

本页贡献者:

zhangxinxu、littleLionGuoQing、sunseekers