当前博客:27-快码FOF中文编程layui教学-组件:进度条

170 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

进度条大家都知道吧,在软件安装,删除,文件上传,下载,一系列需要等待的情况都可以用进度条来显示进度,

layui也内置了进度条组件,在上传文件的时候,我经常使用它,

使用方法非常简单,进度条代码如下:

<区块 类名="lay-进度条">
	<区块 类名="lay-进度条-进度" lay-百分比="10%"></区块>
</区块>
<区块 类名="lay-进度条" lay-显示百分比="显示">
	<区块 类名="lay-进度条-进度 lay-橙色背景" lay-百分比="30%"></区块>
</区块>
<区块 类名="lay-进度条 lay-进度条-大尺寸" lay-显示百分比="显示" lay-过滤器="演示">
	<区块 类名="lay-进度条-进度 lay-蓝色背景" lay-百分比="0%"></区块>
</区块>
<按钮 类名="lay-按钮" 点击回调="设置进度()">设置进度条为50%</按钮>
<按钮 类名="lay-按钮" 点击回调="模拟进度()">模拟进度条</按钮>
<脚本>
	定义函数 设置进度() {
		lay_元素.进度("演示", "50%");
	}
	定义函数 模拟进度() {
		变量 进度 = 0;
		变量 时间钟 = 启动时钟(定义函数 () {
			进度 = (进度 + 计算类.取随机数() * 10) | 0;
			如果 (进度 > 100) {
				进度 = 100;
				关闭时钟(时间钟);
			}
			lay_元素.进度("演示", 进度 + "%");
		}, 300 + 计算类.取随机数() * 1000);
	}
</脚本>
Markup

代码效果展示:

知识点:

1、进度条组件由一个类名 lay-进度条 的容器包裹;

2、进度条可以直接在属性设置进度,lay-百分比=“100%”;

3、进度条可以更改进度颜色和尺寸样式,参考代码案例;

4、可以用 lay-元素.进度 函数动态改变进度值;

5、可以用 lay-显示百分比="显示" 来控制十分显示文字,不设置则不显示。

 

点击此处跳转案例下载:点击下载lay-进度条实例

27-快码FOF中文编程layui教学-组件:进度条