官方提供的 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. 字符串匹配算法--KMP字符串搜索(Knuth–Morris–Pratt string-searching)C语言实现与讲解

    一.前言   在计算机科学中,Knuth-Morris-Pratt字符串查找算法(简称为KMP算法)可在一个主文本字符串S内查找一个词W的出现位置.此算法通过运用对这个词在不匹配时本身就包含足够的信息 ...

  2. 3ds Max File Format (Part 5: How it all links together; ReferenceMaker, INode)

    At this point, you should start to familiarize yourself a bit with the publicly available 3ds Max AP ...

  3. PyQt5学习笔记-从主窗体打开一个子窗体

    PyQt5学习笔记-从主窗体打开一个子窗体 软件环境: Eric6+Python3.5+PyQt5 试验目标: 1.点击菜单项Open,打开一个子窗体 2.点击按钮Open,打开一个子窗体 主窗体设计 ...

  4. Educational Codeforces Round 81 (Rated for Div. 2) A-E简要题解

    链接:https://codeforces.com/contest/1295 A. Display The Number 贪心思路,尽可能放置更多位,如果n为奇数,消耗3去放置一个7,剩下的放1 AC ...

  5. OpenCV函数 重映射

    重映射是什么意思? 把一个图像中一个位置的像素放置到另一个图片指定位置的过程. 为了完成映射过程, 有必要获得一些插值为非整数像素坐标,因为源图像与目标图像的像素坐标不是一一对应的. 我们通过重映射来 ...

  6. 题解 【洛谷P1035】[NOIP2002普及组]级数求和

    [NOIP2002普及组]级数求和 这个题……用循环也是可以的,不过我写了两种循环的题解,供各位dalao参考!O(∩_∩)O谢谢! for循环版本: #include<bits/stdc++. ...

  7. Django_后台管理

    1. 站点管理 2. 创建超级管理员 3. 添加自己的数据模型 默认是打印字符串的 4. 个性化站点管理的定制 4.1 个性化规则 admin.py 4.2 布尔值定制显示 4.3 插入班级的时候同时 ...

  8. 计划任务:at和crontab

    一.概述 作为一名运维人员,你经常需要将某些命令或脚本放入计划任务中去执行.例如,服务器在白天的访问量一般较大,而服务器在承受巨大访问压力的同时对其进行全备份是不合适的,这时候就可以考虑将备份工作放入 ...

  9. phpstudy扩展mongoDB

    观察如下3个参数,即位数,ts/nts,vc9/vc11/……三条规则(一定要一一对应) 重要是,还要对应PHP的版本,我选的是5.6的对应的版本 去http://windows.php.net/do ...

  10. java项目连接Oracle配置文件

    转载自:https://blog.csdn.net/shijing266/article/details/42527471 driverClassName=oracle.jdbc.driver.Ora ...