layui layer实现网页遮罩层加载

2022年1月20日 Jerry 3640 2023年11月4日

基础版本

layui layer实现网页遮罩层加载,在后台请求时展示加载中遮罩层...实例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layui</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />

</head>
<body>

<!-- 你的 HTML 代码 -->
<button type="button" class="layui-btn layui-btn-danger" id="aaaa">5秒遮罩</button>

<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  //,form = layui.form;

  //layer.msg('Hello World');
});
$('#aaaa').on('click', function(){
    var index = layer.load(2, {
          shade: [0.1,'#000'],
          time: 5*1000,
        });

  });
</script> 
</body>
</html>

核心代码 var index = layer.load(2, {shade: [0.1,'#000'], time: 5*1000, });

shade:[0.1, '#000']  表示0.1透明度的 #000颜色的遮罩

time: 5000 表示 5秒后自动关闭

数字 2 表示样式,可设置1-4

附上layui的镜像站:https://www.layuiweb.com/doc/modules/layer.html

为什么是镜像站?因为layui作者把网站关闭了。。。。

进阶版本:

如何在加载的同时,显示当前任务执行状态呢、?这样交互体验是不是更舒服一些呢?

代码如下:使用 loading 的 同时 再结合 layer的msg提示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layui</title>
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />

</head>
<body>

<!-- 你的 HTML 代码 -->
<button type="button" class="layui-btn layui-btn-danger" id="aaaa">开始处理</button>


<h3>当前状态:</h3><input type="button" class="layui-btn" id="tip" value="未开始" ></input>

<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer;
});

$('#aaaa').on('click', function(){
    var index = layer.load(2, {shade: [0.1,'#000']});

    //延时执行  模拟每三秒间隔执行流程 1 2 3 4 完成   
    var promise = new Promise(function(resolve){
      document.getElementById("tip").value = "流程处理一"
      layer.closeAll('tips'); //关闭所有的tips层
      layer.msg('流程处理一',{time: 0, offset: '320px'});
      console.log('1 do something');
      resolve();
    }).then(sleep(3000)).then(function(){
      document.getElementById("tip").value = "流程处理二"
      layer.closeAll('dialog'); //关闭所有的tips层
      layer.msg('流程处理二',{time: 0, offset: '320px'});
      console.log('2 after sleep 3000');
    }).then(sleep(3000)).then(function(){
      document.getElementById("tip").value = "流程处理三"
      layer.closeAll('dialog'); //关闭所有的tips层
      layer.msg('流程处理三',{time: 0, offset: '320px'});
      console.log('3 after sleep 3000');
    }).then(sleep(3000)).then(function(){
      document.getElementById("tip").value = "流程处理四"
      layer.closeAll('dialog'); //关闭所有的tips层
      layer.msg('流程处理四',{time: 0, offset: '320px'});
      console.log('4 after sleep 3000');
    }).then(sleep(3000)).then(function(){
      document.getElementById("tip").value = "流程处理完成"
      layer.closeAll('dialog'); //关闭所有的tips层
      console.log('Done after sleep 3000');
    })
});

//每隔一秒检测当前状态
timers2 = setInterval("check()", 1000);

function check(){
    var state = document.getElementById("tip").value;
    if (state == "流程处理完成")
        layer.closeAll('loading'); //完成了就关闭加载层
}

function sleep(delay){
  return function(){
    return new Promise(function(resolve, reject){
      setTimeout(resolve, delay);
    });
  }
}

</script> 
</body>
</html>

实现效果:


原创文章,转载请注明出处: https://jerrycoding.com/article/layui-loading

微信
jerry微信赞助
支付宝
jerry支付宝赞助

您尚未登录,暂时无法评论。请先 登录 或者 注册

0 人参与 | 0 条评论