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

安装与调用

loading 效果支持以插件形式单独使用，引入下面 CSS：

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/hope/ui/Loading/index.css">

如果想要使用动态增强功能，需要引入下面的 JS 文件：

<script src="https://qidian.gtimg.com/lulu/hope/ui/Loading/index.js"></script>

也可采用如下方式进行引用：

<script type="module">
    import "https://qidian.gtimg.com/lulu/hope/ui/Loading/index.js";
</script>

自定义loading元素

图形loading-内联

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

图形loading-块级

当 <ui-loading> 元素包含 rows 属性，其表现为块级元素。

<ui-loading rows="5"></ui-loading>
<ui-loading rows="5" size="3"></ui-loading>
<ui-loading rows="5" size="3" color="var(--ui-red)"></ui-loading>

自定义属性

<ui-loading> 元素支持如下所示的几个 HTML 属性：

rows

表示加载提示元素的行数，和 <textarea> 元素一样，会有对应的高度表现。

如果我们想要手动设置 <ui-loading> 元素的高度，可以设置 rows="auto"，然后再按照普通元素进行高度设置即可。

<ui-loading class="yoyo" rows="auto"></ui-loading>

.yoyo {
    height: 88px;
}

size

表示加载圈圈图形的大小，属性值为整数值，渲染尺寸为该值和 0.625rem（10px） 的倍数。默认值是2。

color

表示加载圈圈图形的颜色。默认为蓝色，设置了则覆盖，支持 CSS 变量表示的颜色。

文本打点loading

这个直接使用 <ui-dot> 元素实现，如果是普通 HTML 标签，还可以使用 is-dot属性设置。

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

带文字内容的加载

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

普通元素呈现loading

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

通过添加类名 .ui-loading 实现，支持简单的提示文本。

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

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

JS 扩展与增强

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

1. 扩展了loading属性。可以设置按钮，或者其他元素为加载状态，可以取消加载状态，以及获取当前元素是否处于加载状态。
2. 增加了全局 loading 效果。
3. 定义了自定义元素 <ui-loading>。

设置按钮的加载效果

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

设置普通元素的加载效果

普通元素设置 loading 属性，会自动添加类名 .ui-loading，此时，大家可以使用这个类名进行一些样式的调整，例如：

.loading-more-a {
    display: block;
    height: 40px;
    line-height: 38px;
    border: 1px solid #ddd;
    text-align: center;
    color: gray;
}
.loading-more-a.ui-loading {
    color: gray;
    cursor: default;
}

<a href="javascript:" class="loading-more-a" role="button">加载更多</a>

button.addEventListener('click', function () {
    this.loading = true;
});

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

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

全局加载中效果

设置 document.loading 的值为 true 或 false 可以显示或隐藏全局加载样式。

// 显示加载
document.loading = true;
// 隐藏加载
document.loading = false;

如果你想使用自定义的加载提示文案，可以通过传递字符串值实现（支持HTML标签）。

document.loading = '面对疾风吧';

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

document.loading = ['努力加载', '依旧努力加载'];

如果希望只出现旋转图标，而没有提示文字，可以设置值为空字符串。

document.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;
// 获取 <ui-loading> 元素的 rows 值
let rows = element.rows;
// 修改 <ui-loading> 元素的 rows 值
element.rows = 3;
// 获取 <ui-loading> 元素的 color 值
let color = element.color;
// 修改 <ui-loading> 元素的 color 值
element.color = #fff;

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