mui 进度条 隐藏
官方提供的 mui(contanier).progressbar().hide(); 并未起作用,DOM是js动态添加的,结果无法隐藏。(越使用,mui 的坑越多,陆续记录中...)
后使用下面的方法,将进度条隐藏了。原理是去掉由 mui-progressbar 类而生成的进度条样式。
var isProgress = $("#progressBar").hasClass("mui-progressbar"); if(isProgress) { $("#progressBar").removeClass("mui-progressbar") }
修正上述所说:
上面所说方法也可以隐藏进度条,但官方提供的 hide() 方法,也是可以的。但需要注意,所说的动态,非动态将 DOM 结构用 JS 添加,例如:
$("#progressBar").append("<div class='mui-progressbar'><span></span></div>");
我一开始便是如此理解“动态创建”,于是就无法直接使用 mui("#progressBar").progressbar().hide(); 进行隐藏。
之后查看官方demo (地址:http://www.dcloud.io/hellomui/examples/progressbar.html),使用下文代码,即可正常使用 mui("#progressBar").progressbar().hide(); 隐藏了。
let proVal = 0;//用来模拟进度的数值 document.getElementById("progressBtn").addEventListener("tap", function() { mui("#progressBar").progressbar({ progress: proVal }).show(); }, false); setInterval(function() { proVal += 4; setProgress() if(proVal > 100) { //disposeProgress() mui("#progressBar").progressbar().hide(); proVal = 0; } }, 500); function setProgress() { mui("#progressBar").progressbar().setProgress(proVal) }
源网址:https://segmentfault.com/a/1190000011129041