masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial Layui > 为什么layui进度条无法渲染出来

为什么layui进度条无法渲染出来

王林
Lepaskan： 2021-03-10 11:07:52
ke hadapan
3618 orang telah melayarinya

为什么layui进度条无法渲染出来

前言：

layui进度条渲染分为两种情况，分别是：静态渲染和动态渲染。

 <div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="yes">
        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
 </div>
Salin selepas log masuk

单独上面一段代码，进度条值是无法显示的。

（1）静态渲染

进度条依赖element组件，如果未引入，进度条将无法显示。

layui.use(&#39;element&#39;, function () {
    var element = layui.element;
});
Salin selepas log masuk

此时进度条显示结果如下：

01bf5b0d88f650cd4de07eaa547fad2.png

（学习视频分享：html视频教程）

（2）动态渲染

需要动态改变进度条的进度值时，layui官网上说，element模块提供了element.progress()的基础方法。

首先设置进度条过滤器（lay-filter="demo")，然后就只需要在某个事件或者语句中执行该方法，即可实现动态改变精度条值。但对于精度条中显示的百分比文字，用户需要自己进行改变。

element.progress(&#39;demo&#39;, &#39;80%&#39;);
Salin selepas log masuk

此时进度条值改变：

8ab1f8d885a6c76f1cc2649ecad30c5.png

相关推荐：layui教程

Atas ialah kandungan terperinci 为什么layui进度条无法渲染出来. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
layui bar kemajuan
sumber：csdn.net
Artikel sebelumnya：layui关闭当前弹出框的方法 Artikel seterusnya：如何运用layui数据添加页面的前端布局？（附源码）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2204
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2349
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1967
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1857
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1915
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan