1. 基本思路
Layui提供了一个全局加载的效果，需要使用layer模块来实现。具体思路是：在数据加载之前显示loading图标，在数据加载完成之后隐藏loading图标。
2. 实现代码
下面是一个使用layui加载数据显示loading，完成后消失loading的实例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui Loading Demo</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 模拟数据加载 -->
<button id="load-data" class="layui-btn">加载数据</button>
<script src="layui/layui.js"></script>
<script>
layui.use(['layer'], function(){
var layer = layui.layer;
// 点击加载按钮，显示loading图标
$("#load-data").click(function() {
var index = layer.load(1);
// 模拟数据加载
setTimeout(function() {
// 加载完成，隐藏loading图标
layer.close(index);
// 显示数据
layer.msg('数据加载成功！');
}, 3000);
});
});
</script>
</body>
</html>
在上面的代码中，我们首先引入了layui的css和JS文件，然后在页面中添加了一个按钮，用于模拟数据加载的功能。在layui.use方法中初始化了layer模块，并给“加载数据”按钮添加了一个click事件。在事件回调函数中，使用layer.load方法显示loading图标，然后模拟加载数据的过程，3秒钟后使用layer.close方法隐藏loading图标，并使用layer.msg方法弹出数据加载成功的信息。
3. 示例说明
上面的代码中，我们使用的是layer.load(1)来显示loading图标，其中的参数1是loading图标的类型，可以是0到2之间的任意一个数字。 如果你要使用另外的loading图标，可以替换layer/loading/目录下的图片，然后在layui.css中修改相应的样式。
另外，由于数据加载过程是异步的，所以我们不能直接在数据加载完成之前隐藏loading图标。因此，需要使用setTimeout方法来模拟数据加载的过程，等数据加载完成之后再隐藏loading图标，并显示数据加载成功的信息。这种方式可以应用于AJAX请求、图片加载等场景。
阅读剩余 18%
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：layui加载数据显示loading加载完成loading消失的实例代码 - Python技术站
微信扫一扫 
支付宝扫一扫 