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