layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

最新推荐文章于 2024-08-16 17:10:14 发布

草巾冒小子

最新推荐文章于 2024-08-16 17:10:14 发布

阅读量5.3k

点赞数 8

分类专栏： Layui 踩坑篇

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/118670461

版权

Layui 踩坑篇专栏收录该内容

19 篇文章 3 订阅

订阅专栏

文章目录

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

layui进度条：调用、参数设置、动态渲染、数据热更新（含案例、代码）

引言：

组件如何设置调用？
声明式引入：layui.use 引入 var 声明 element 组件
如何设置背景类？
class="layui-bg-red"
如何自定义提示文本？
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
如何实现 js动态操作？
1.【动态操作进度条】讲述的是一个已经设置了过滤器（lay-filter=“demo”）的进度条
现在你只需要在某个事件或者语句中执行方法：element.progress(‘demo’, ‘50%’);
即可改变进度。

动态操作 · 文档截图：

如何更新渲染：进度条，视图热更新
两种方法，声明式渲染：
第一种：element.render('progress', 'demoStepX') 【文档解说】
第二种：element.init(); 【文档解说】

一、demo案例

1.1. 应用 · 截图：

在这里插入图片描述

1.2. 案例 · 全部代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>演示-进度条-三步骤</title>
  <link rel="stylesheet" href="statics/plugin/layui/css/layui.css">
</head>
<body>
<!-- 让IE8/9兼容栅格 -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!--进度条-->
<!-- <div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar layui-bg-red" lay-percent="1 / 3"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar layui-bg-orange" lay-percent="2/ 3"></div>
</div>
<div class="layui-progress layui-progress-big" lay-showpercent="true">
  <div class="layui-progress-bar layui-bg-green" lay-percent="3 / 3"></div>
</div> -->
<!--进度条设置-->
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demoStepX">
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
  <button class="layui-btn set-btn-active" data-type="setOneStepButton">设置 33.3%</button>
  <button class="layui-btn set-btn-active" data-type="setTwoStepButton">设置 66.6%</button>
  <button class="layui-btn set-btn-active" data-type="setThreeStepButton">设置 100%</button>
  <button class="layui-btn set-btn-active" data-type="loadingButton">模拟 loading</button>
</div>


<script src="statics/js/laycms_js/jquery.min.js"></script>
<script src="statics/plugin/layui/layui.js"></script>
<script>
  layui.use(['form', 'element'], function(){
    var form = layui.form
    ,element = layui.element //Tab的切换功能，切换事件监听等，需要依赖element模块
    ,layer = layui.layer;
    
    //进度条：初始化渲染
    element.progress('demoStepX', '0/3');
    element.render('progress', 'demoStepX')
    
    //触发事件
	  var active = {
	    setOneStepButton: function(){
	      //第一步
	      element.progress('demoStepX', '33.3%');
          element.init();   

	    }
	    ,setTwoStepButton: function(){
	      //第二步
	      element.progress('demoStepX', '66.6%');
          element.init();   
	    }
	    ,setThreeStepButton: function(){
	      //第三步
	      element.progress('demoStepX', '100%');
          element.init();   
	    }
	    ,loadingButton: function(othis){
	      var DISABLED = 'layui-btn-disabled';
	      if(othis.hasClass(DISABLED)) return;
	    
	      //模拟loading
	      var n = 0, timer = setInterval(function(){
	        n = n + Math.random()*10|0;  
	        if(n>100){
	          n = 100;
	          clearInterval(timer);
	          othis.removeClass(DISABLED);
	        }
	        element.progress('demoStepX', n+'%');
	      }, 300+Math.random()*1000);
	      
	      othis.addClass(DISABLED);
	    }
	  };
	  //进度条演示
	  $('.set-btn-active').on('click', function(){
	    var othis = $(this), type = $(this).data('type');
	    active[type] ? active[type].call(this, othis) : '';
	  });
  
  
    
  });
</script> 
</body>
</html>

二、自定义案例

2.1. 部分代码：

<!--进度条设置-->
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demoStepX">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>


<!-- 先引入：防止代码报错不生效 -->
<script src="{APP_PATH}statics/plugin/layui/layui.js"></script>

<!--然后，再定义代码！-->
{if !isset($_GET['t'])}
<script>
	layui.use('element', function(){
	  var element = layui.element;	  
	  //第一步：作为初始化设置
	  element.progress('demoStepX', '1/3');
      element.render('progress', 'demoStepX');
	});
</script>
{elseif isset($_GET['t']) && $_GET['t']==2}
<script>
	layui.use('element', function(){
	  var element = layui.element;	  
	  //第二步
	  element.progress('demoStepX', '2/3');
      element.render('progress', 'demoStepX');
	});
</script>
{elseif isset($_GET['t']) && $_GET['t']==3}
<script>
	layui.use('element', function(){
	  var element = layui.element;	  
	  //第三步
	  element.progress('demoStepX', '3/3');
      element.render('progress', 'demoStepX');
	});
</script>
{/if}

2.2. 截图：

在这里插入图片描述

三、背景设置：

访问：进度条 · 页面元素

然后，找到下图所示的公共类：

四、使用说明：

其他设置：官方演示文档：风格、颜色、尺寸、文本，等等
注意事项分析 · 总结 · 如下：
1. 必须先引入layui.js框架文件；
2. 如需要jquery支持，需要事先引入jquery库；
3. 渲染不生效？一般都是代码编写不规范的问题（建议先从上述两点入手分析并查找bug）;
4. 风格：
5. 颜色：（官方已发现的）六种色系，具体参考：背景色公共类 --> 背景色；
6. 尺寸：width:100%；需要固定尺寸，请增加并设定父级元素宽度；
7. 文本：目前支持规范如下：1/3、0.5/3，33.3%，66/100、50/200，
  另外：小尺寸数字在上，大尺寸数字在内，具体参考：官方文档；