layui 实现加载动画以及非真实加载进度的方法

2023年6月11日上午1:59 • JavaScript

下面我将为您详细讲解 “layui 实现加载动画以及非真实加载进度的方法”的完整攻略。

一、前言

在实际项目中，我们有时需要实现一个页面打开时的进度条动画效果或者加载动画。在layui中，我们可以很容易的实现这个效果。

二、加载动画

1. 示例一

我们可以使用 layui的layer模块来实现一个加载动画。下面是一个示例：

// 引入layer模块
layui.use(['layer'], function () {
    var layer = layui.layer;
    // index表示layer加载的图标类型，可以为0-2
    var index = layer.load(1);
    // 模拟耗时操作
    setTimeout(function () {
        // 关闭加载动画
        layer.close(index);
    }, 3000);
});

在上面的示例中，首先使用layui.use方法加入layer模块。然后使用layer.load()方法加载一个加载动画，返回值是加载动画的索引号。接着我们可以使用一个定时器来模拟耗时的操作，3s后我们通过layer.close()方法来关闭加载动画。

2. 示例二

下面是一个更加简单的示例：

layui.use(['layer'], function () {
    var layer = layui.layer;
    layer.load(1, {
        shade: [0.1, '#808080'] // 加载透明度为0.1的灰色背景
    });
});

在这个示例中，我们同样使用了layer的load方法展示一个加载动画。我们通过第一个参数指定使用默认的或者自定义的加载图标。在这里我们使用了1来代表默认的加载图标。通过传入的第二个参数，我们可以设置加载动画的属性，比如上面的代码中设置了透明度为0.1的灰色背景。

三、页面进度条

1. 示例一

我们可以使用layui的element模块来实现一个进度条动画效果。

// 引入element模块
layui.use(['element'], function () {
    var element = layui.element;
    var progress = 0; // 定义初始进度条为0%
    var progressTimer = setInterval(function () {
        progress += parseInt(Math.random() * 20); // 每次增加一个0-20之间的随机数
        element.progress('demo', progress + '%'); // 更新进度条显示
        if(progress >= 100) clearInterval(progressTimer); // 判断进度是否达到100%，达到则停止定时器
    }, 500); // 每隔500ms增加一次进度条
});

在这个示例中，我们使用了一个定时器来不断更新进度条。首先我们使用layui.use方法加入element模块。接着定义一个变量，表示初始化的进度条为0。然后每隔0.5s，我们会随机增加一个0-20之间的数字，然后通过element.progress()方法来更新进度条的显示。如果进度条已经达到100%，我们就清除定时器。

2. 示例二

下面是一个更加漂亮的进度条。

<div class="layui-progress layui-progress-big" lay-showPercent="true">
    <div class="layui-progress-bar layui-bg-red" lay-percent="0%">
        <span class="layui-progress-text">0%</span>
    </div>
</div>

<script>
// 引入element模块
layui.use(['element'], function () {
    var element = layui.element;
    var progress = 0; // 定义初始进度条为0%
    var progressTimer = setInterval(function () {
        $('.layui-progress-bar').attr('lay-percent', `${progress}%`); // 更新带百分比字符的进度条
        element.progress('demo', `${progress}%`); // 更新不带百分比字符的进度条
        $('.layui-progress-text').text(`${progress}%`); // 更新进度条上的文字
        progress += 20; // 每次增加20%
        if(progress >= 100) clearInterval(progressTimer); // 判断进度是否达到100%，达到则停止定时器
    }, 500); // 每隔500ms增加一次进度条
});
</script>

在这个示例中，我们定义了一个在页面上显示的进度条，包括进度条的颜色、大小、百分比文字等。然后在使用定时器来模拟进度条的不断增加，我们通过更新lay-percent、text、以及element.progress等方法，来更新不同的进度条显示。