官方提供的 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

mui 进度条 隐藏的更多相关文章

  1. ajax 上传文件,显示进度条,进度条100%,进度条隐藏,出现卡顿就隐藏进度条,显示正在加载,再显示上传完成

    <form id="uploadForm" method="post" enctype="multipart/form-data"&g ...

  2. android:异步任务asyncTask介绍及异步任务下载图片(带进度条)

    为什么要用异步任务? 在android中仅仅有在主线程才干对ui进行更新操作.而其他线程不能直接对ui进行操作 android本身是一个多线程的操作系统,我们不能把全部的操作都放在主线程中操作 .比方 ...

  3. ASP.NET中二进制流下载文件时进度条的使用

    说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...

  4. mui 滑块开关 进度条 以及如何获取值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. Android 显示或隐藏标题栏进度条TitleProgressBar

    1.新建项目,布局文件如下:activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/ ...

  6. LODOP打印URL显示和隐藏进度条

    不建议使用ADD_PRINT_URL:由于Lodop借用IE下载引擎,与非IE浏览器之间目前不能传递Session(Cookies),所以需要安全验证的页面不要用URL方式打印,要用页面已经下载好的内 ...

  7. js点击什么显示什么的内容,隐藏其它和进度条

    点击什么显示什么的内容 <div style="width:200px; height:40px"> <div class="yiji" st ...

  8. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  9. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

随机推荐

  1. CTF——代码审计之变量覆盖漏洞writeup【2】

    题目: 基础: 所需基础知识见变量覆盖漏洞[1]  分析: 现在的$a=’hi’,而下面的函数需满足$a=’jaivy’才可以输出flag,那么需要做的事就是想办法覆盖掉$a原来的值. 那么出现的提示 ...

  2. JDBC用户访问被拒绝

    线程“主”java中的异常.于sq1.sQLException:用户“root”@“localhost”被拒绝访问(使用密码:YES)root密码错误

  3. python面试的100题(20)

    76.递归函数停止的条件? 递归的终止条件一般定义在递归函数内部,在递归调用前要做一个条件判断,根据判断的结果选择是继续调用自身,还是return:返回终止递归.终止的条件:1.判断递归的次数是否达到 ...

  4. 网易云信融合CDN方案及实践

    日前,网易云信视频云架构师席智勇在第七届GFIC全球家庭互联网大会进行了题为<网易云信融合CDN方案及实践>的分享,以下是演讲内容回顾. 图为 网易云信视频云架构师席智勇 CDN所面临的问 ...

  5. [TJOI2017] DNA - 后缀数组,稀疏表

    [TJOI2017] DNA Description 求模式串与主串的匹配次数,容错不超过三个字符. Solution 枚举每个开始位置,进行暴力匹配,直到失配次数用光或者匹配成功.考虑到容错量很小, ...

  6. 地铁合作(hjy)

       用时大概时间 18 个小时  我的队友是 :黄珺瑜我们一开始的想法是自己建立数据库,用来查询路线,再调用一下百度api作为地图(仅作地图没有任何操作的那种):后来我们的步骤也的确是这样,我们先确 ...

  7. Spring Cloud介绍

    Spring Cloud中国社区博客 Spring Cloud发展到2016年,国内关注的人越来越多,但是相应学习交流的平台和材料比较分散,不利于学习交流,因此Spring Cloud中国社区应运而生 ...

  8. html5 标准文档结构

    <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset=" ...

  9. Mysql中的触发器【转】

    转载:https://www.cnblogs.com/chenpi/p/5130993.html 阅读目录 什么是触发器 特点及作用 例子:创建触发器,记录表的增.删.改操作记录 弊端 什么是触发器 ...

  10. springMVC 校验时,CustomValidationMessages.properties中的错误提示信息的中文乱码 问题

    今天在学习springmvc的校验时,遇到了CustomValidationMessages.properties配置文件的信息,才错误提示时是乱码的问题:在网上找了很多方法都没解决:最后原来是在配置 ...